/* A quiet charcoal setting for the warm miniature workspace artwork. */
.ambient_enabled { background: var(--color_page); isolation: isolate; }
.ambient_toggle { padding: 0.45rem 0.75rem; border: 1px solid var(--color_panel_border); border-radius: 2rem; background: var(--color_surface); color: var(--color_text); font: inherit; font-size: 0.8rem; cursor: pointer; min-height: 44px; }
.ambient_toggle:disabled { cursor: default; }
.hero_artwork { margin: 0; width: 100%; max-width: 30rem; justify-self: center; }
.hero_artwork img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 1rem; border: 1px solid var(--color_panel_border); box-shadow: 0 20px 50px #0005; }
#home.landing_hero:has(.hero_artwork) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
#home:has(.hero_artwork) .hero_copy h1 { white-space: normal; font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1.1; }
@media(max-width:760px) { #home.landing_hero:has(.hero_artwork) { grid-template-columns: 1fr; } .hero_artwork { max-width: 25rem; } }
@media print { .ambient_toggle { display: none; } }
/* Pointer response, scroll reveals and native page-to-page transitions. */
.reading_progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 20; pointer-events: none; background: var(--color_teal); transform-origin: left; transform: scaleX(0); }
.reactive_card { transition: transform 90ms ease-out, box-shadow 260ms ease, border-color 260ms ease; }
.reactive_card.pointer_active { transform: perspective(1100px) rotateX(var(--tilt_x, 0deg)) rotateY(var(--tilt_y, 0deg)); background-image: radial-gradient(circle at var(--light_x, 50%) var(--light_y, 50%), #e7c79814, transparent 65%); box-shadow: 0 18px 38px #00000060; border-color: #b8996b; }
.reactive_control { translate: var(--nudge_x, 0px) var(--nudge_y, 0px); transition: translate 90ms ease-out, background-color 180ms ease, box-shadow 180ms ease; }
.reactive_control:active { scale: 0.97; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html:not([data-motion="off"]) { scroll-behavior: smooth; }
  ::view-transition-old(root) { animation: page_out 140ms linear both; }
  ::view-transition-new(root) { animation: page_in 160ms ease-out both; }
  @keyframes page_out { to { opacity: 0; } }
  @keyframes page_in { from { opacity: 0; } to { opacity: 1; } }
}
html[data-motion="off"] .reactive_card, html[data-motion="off"] .reactive_control { transform: none; translate: none; scale: none; transition: none; }
html[data-motion="off"]::view-transition-old(root), html[data-motion="off"]::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .reactive_card, .reactive_control { transform: none !important; translate: none !important; scale: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media print { .reading_progress { display: none; } }
/* A decorative halo complements the native cursor rather than replacing it. */
.cursor_halo { position: fixed; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 1px solid #d8b07aaa; border-radius: 50%; background: #d8b07a10; pointer-events: none; z-index: 30; opacity: 0; transition: translate 70ms ease-out, scale 140ms ease, opacity 120ms ease; }
.cursor_halo.cursor_visible { opacity: 1; }
.cursor_halo.cursor_link { scale: 1.55; background: #d8b07a25; }
html[data-motion="off"] .cursor_halo, body:has(dialog[open]) .cursor_halo { display: none; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .cursor_halo { display: none; } }
@media print { .cursor_halo { display: none; } }


/* Fill the viewport on every page; crop the video rather than letterboxing it. */
.ambient_video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #1c2230; z-index: -2; pointer-events: none; }
/* A square scene should not be enlarged to the width of a landscape monitor. */
@media (min-aspect-ratio: 4/3) {
  .ambient_video {
    object-fit: contain;
    background: radial-gradient(ellipse at center, #263244, #131c29 75%);
  }
}
.ambient_enabled::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
@media print { .ambient_video { display: none; } }

/* Leave the right side of the scene open; anchor reading areas on the left. */
.ambient_enabled {
  --color_text: #fff8ee;
  --color_muted: #eef2f6;
  --color_teal: #c3eff8;
  --color_amber: #f1cd95;
  --color_panel_border: #8195aa70;
}
.ambient_enabled::before {
  background: linear-gradient(90deg, #101824d6 0%, #101824b8 45%, #10182499 100%);
}
.ambient_enabled header { border-bottom-color: #b4e4ed30; }
.ambient_enabled #home.landing_hero {
  min-height: 26rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.ambient_enabled #home .hero_copy { max-width: 52rem; width: 100%; container-type: normal; }
.ambient_enabled #home .hero_copy h1 {
  white-space: normal;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}
.ambient_enabled .name_highlight { color: var(--color_text); }
.ambient_enabled :is(.hero_copy, .page_intro, .feedback_prompts, .gallery_status, footer) {
  text-shadow: 0 2px 12px #070d17;
}
.ambient_enabled .hero_copy > p { font-size: 1.125rem; }
.ambient_enabled .page_intro { max-width: 44rem; min-height: 0; padding-block: clamp(2rem, 4vw, 3rem); }
.ambient_enabled :is(#about_me, .content_card, .feedback_invitation, .feedback_panel, .hero_notes) {
  position: relative;
  isolation: isolate;
  background-color: #17233340;
  border-color: #b4cce838;
  border-width: 1px;
  border-radius: 1rem;
  box-shadow: 0 8px 24px #050b1414;
  text-shadow: 0 1px 5px #070d17;
}
.ambient_enabled #about_me { width: 100%; max-width: none; }
.ambient_enabled :is(.card_grid, .journal_list, .feedback_invitation, .feedback_layout) { width: 100%; max-width: none; }
.ambient_enabled .card_grid { gap: 1.5rem; }
.ambient_enabled .page_section { margin-top: clamp(2rem, 4vw, 3.5rem); }
.ambient_enabled a.content_card:hover { background-color: #22334752; }
.ambient_enabled .album_cover { background: linear-gradient(135deg, #30455c26, #1b293b0d); }
.ambient_enabled .button { color: #122334; text-shadow: none; }
.ambient_enabled .navigation_panel { background: #1b293bf7; }
.ambient_enabled footer { background: #101824b8; padding-inline: 0; border-radius: 0; }
@media (max-width: 760px) {
  .ambient_enabled::before { background: linear-gradient(90deg, #101824d6, #10182491); }
  .ambient_enabled #home.landing_hero { min-height: 0; align-items: center; padding-block: 3.5rem; }
  .ambient_enabled #home .hero_copy { width: 100%; max-width: 32rem; }
  .ambient_enabled #home .hero_copy h1 { font-size: clamp(2.25rem, 8vw, 3.25rem); }
  .ambient_enabled .page_intro { min-height: 0; }
  .ambient_enabled .card_grid { gap: 1rem; }
}

/* Shared edges and natural wrapping across the public pages. */
.ambient_enabled :is(h1, h2, h3, p, a) { overflow-wrap: break-word; }
.ambient_enabled :is(.hero_copy, .page_intro) { text-align: left; }
.ambient_enabled .actions { gap: 1rem 1.5rem; }
.ambient_enabled .feedback_layout > * { min-width: 0; }
.ambient_enabled .content_card { display: flex; flex-direction: column; align-items: stretch; }
.ambient_enabled .content_card > .album_open_button { align-self: start; margin-top: auto; }
.ambient_enabled :is(.content_card, #about_me, .feedback_panel) p { max-width: 65ch; }
@media (max-width: 900px) and (min-width: 641px) {
  .ambient_enabled .feedback_layout { grid-template-columns: 1fr; gap: 2rem; }
}

/* A faint moving rim echoes the shiny buttons without covering the video. */
@property --panel-shine-angle {
  syntax: '<angle>';
  initial-value: 35deg;
  inherits: false;
}
@supports (mask-composite: exclude) {
  .ambient_enabled :is(#about_me, .content_card, .feedback_invitation, .feedback_panel, .hero_notes)::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: conic-gradient(from var(--panel-shine-angle), transparent 10%, #8484ff45 24%, #dcefff85 29%, #8484ff45 34%, transparent 48%, transparent 72%, #b4e4ed38 85%, transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: .75;
    transition: opacity 250ms ease;
  }
  .ambient_enabled :is(#about_me, .content_card, .feedback_invitation, .feedback_panel, .hero_notes):is(:hover, :focus-within)::before { opacity: .85; }
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .ambient_enabled :is(#about_me, .content_card, .feedback_invitation, .feedback_panel, .hero_notes)::before {
      animation: panel_shine 16s linear infinite;
    }
  }
}
@keyframes panel_shine { to { --panel-shine-angle: 395deg; } }
html[data-motion="off"] .ambient_enabled :is(#about_me, .content_card, .feedback_invitation, .feedback_panel, .hero_notes)::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ambient_enabled :is(#about_me, .content_card, .feedback_invitation, .feedback_panel, .hero_notes)::before { transition: none; }
}
/* Keep pointer lighting just as restrained as the resting panel. */
.ambient_enabled .reactive_card.pointer_active { box-shadow: 0 8px 24px #050b141f; border-color: #b4cce85c; }

/* Consistent text rhythm and balanced wide sections. */
.ambient_enabled main { word-spacing: normal; }
.ambient_enabled main p { line-height: 1.65; text-align: start; }
.ambient_enabled main .eyebrow { margin-bottom: .55rem; line-height: 1.4; letter-spacing: .12em; }
.ambient_enabled main :is(h1, h2) { margin-bottom: 1rem; }
.ambient_enabled #home .hero_copy h1 { margin-bottom: 1rem; }
.ambient_enabled .actions { margin-top: 1.25rem; }
.ambient_enabled #about_me .eyebrow { margin-bottom: .55rem; }
.ambient_enabled #about_me h2 { margin-bottom: 1.1rem; }
.ambient_enabled #about_me .about_story p { max-width: none; margin-bottom: 1rem; break-inside: avoid; }
.ambient_enabled #about_me .about_story > p:last-child { margin-bottom: 0; }
.ambient_enabled .page_intro { max-width: none; }
.ambient_enabled .feedback_invitation { display: grid; gap: 1.25rem 2rem; align-items: center; }
.ambient_enabled .feedback_invitation > .button { justify-self: start; }
.ambient_enabled .feedback_invitation p:last-child { margin-bottom: 0; }
.ambient_enabled :is(.content_card, #about_me, .feedback_panel, .feedback_invitation) { text-shadow: 0 1px 4px #070d17, 0 0 12px #070d1780; }
.ambient_enabled :is(.tag, .tools, .challenge_hint, .gallery_status) { line-height: 1.5; }
@media (min-width: 1000px) {
  .ambient_enabled #about_me .about_story { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
  .ambient_enabled .page_intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .ambient_enabled .page_intro > .eyebrow { grid-column: 1 / -1; }
  .ambient_enabled .page_intro > h1 { margin-bottom: 0; }
  .ambient_enabled .page_intro > p:not(.eyebrow) { margin: 0; }
  .ambient_enabled .journal_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ambient_enabled .feedback_invitation { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Keep only the opened picture views borderless. */
.ambient_enabled :is(#album_dialog.showing_album, #photo_dialog) {
  border: 0;
  box-shadow: none;
}