/* Quiet, tactile details. Existing imagery, compact cards and copy stay intact. */
:root { --motion:240ms; --ease:cubic-bezier(.22,.68,0,1); --accent:#e8d37a; }
html { scrollbar-gutter:stable; }
::selection { background:#ebdb8c; color:#263c32; }
.skip-link { position:fixed; left:20px; top:-70px; padding:14px 20px; z-index:100; background:white; border:1px solid var(--ink); border-radius:8px; }
.skip-link:focus { top:14px; }
.reading-progress { position:fixed; z-index:30; top:0; left:0; width:100%; height:2px; background:#859768; transform:scaleX(var(--page-progress,0)); transform-origin:left; pointer-events:none; }
header::before { content:""; position:absolute; inset:12px -18px; z-index:-1; background:#fffef9e8; border:1px solid #e4e8dc80; border-radius:16px; box-shadow:0 6px 24px #263c3205; backdrop-filter:blur(18px); opacity:0; transition:opacity var(--motion),inset var(--motion); }
header { isolation:isolate; transition:height var(--motion); }
body.scrolled header::before { opacity:1; }
.brand { display:flex; align-items:center; gap:13px; }
.brand-name { display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:500; line-height:1.25; }
.brand-name > span { font-size:12px; font-weight:400; color:#566d5e; letter-spacing:.02em; }
.wordmark { box-shadow:inset 0 0 0 1px #64712b12; }
.languages { box-shadow:0 2px 8px #1c302707; }
.languages button { min-height:40px; transition:background var(--motion),color var(--motion); }
#work { scroll-margin-top:140px; }
.project-grid { gap:24px; }
.project-card { box-shadow:0 2px 5px #24372c03,0 9px 26px #24372c04; transition:transform var(--motion) var(--ease),box-shadow var(--motion),border-color var(--motion); }
.project-card::after { background:linear-gradient(#ffffff2e,#ffffff2e),radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,40%),#ffffff70,transparent 75%); }
.project-plus { background:#fafbf7; transition:background var(--motion),border-color var(--motion),transform var(--motion) var(--ease); }
.project-card:focus-visible { outline-color:#536b40; outline-offset:5px; }
@media(hover:hover) and (pointer:fine) {
  .project-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px -12px #263c3233; border-color:#c3cfbc; }
  .project-card:hover .project-plus { transform:translateY(-50%) rotate(90deg); background:#ecd984; border-color:#dbc36a; }
  .project-link:hover { text-decoration-color:#d2b950; }
}
.project-card:active { transform:translateY(0); }
.project-meta,.dialog-kicker,.gallery-count,.viewer-count { font-variant-numeric:tabular-nums; letter-spacing:.05em; }
.bio { padding-top:78px; }
.bio-list { margin-top:24px; }
.bio-list li { padding:18px 0; }
.contact { border-top:1px solid var(--line); padding-top:32px; }
.contact h2 { margin-bottom:16px; }
.contact a { display:inline-block; font-size:clamp(16px,2vw,19px); }
.copy-email { margin:0 0 0 14px; padding:10px 14px; min-height:44px; border:1px solid #d9e0d2; border-radius:30px; background:transparent; color:var(--muted); font-size:13px; transition:background var(--motion); }
.copy-email:hover,.copy-email.copied { background:#f2e6ae; color:var(--ink); }
.contact-status { display:block; min-height:20px; margin-top:12px; font-size:13px; color:var(--muted); }
.project-dialog,.project-dialog:has(.project-gallery) { width:min(840px,calc(100% - 48px)); padding:32px; max-height:88dvh; border-radius:16px; border-color:#e0e5d8; background:#fffffc; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c5ccbc transparent; box-shadow:0 30px 110px #17271d40; }
.project-dialog::backdrop { background:#14221b70; backdrop-filter:blur(8px); }
.project-dialog[open] { animation:project-enter .32s var(--ease) both; }
.dialog-top { position:sticky; top:-32px; z-index:5; margin:-32px -32px 26px; padding:18px 32px; border-bottom:1px solid #e4e8dc90; background:#fffffcf0; backdrop-filter:blur(18px); }
.dialog-close { min-height:44px; min-width:64px; border-color:#d9e1d3; }
.project-dialog h2 { font-size:24px; letter-spacing:-.035em; margin-bottom:26px; }
.project-dialog p { line-height:1.95; color:#4f6256; max-width:68ch; }
.project-dialog ul { line-height:2; }
.project-scripture { background:#f7f6ed; border-left:2px solid #d8be60; padding:18px 22px; border-radius:0 8px 8px 0; font-size:16px; }
.project-gallery { position:relative; gap:12px; margin-bottom:18px; padding:4px 2px 14px; scrollbar-width:thin; scroll-padding-left:2px; cursor:grab; touch-action:pan-x pan-y; }
.project-gallery::after { content:""; flex:0 0 var(--gallery-tail,0px); }
.project-gallery.dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.gallery-item { display:flex; }
.gallery-photo { position:relative; display:block; padding:0; border:0; border-radius:8px; background:none; cursor:zoom-in; }
.gallery-photo:focus-visible { outline-offset:2px; }
.gallery-photo::after { content:"+"; position:absolute; bottom:12px; right:12px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:#fffffff0; font-size:18px; opacity:0; transition:opacity var(--motion); pointer-events:none; }
.gallery-photo:hover::after,.gallery-photo:focus-visible::after { opacity:1; }
.gallery-item img { border-radius:8px; height:340px; pointer-events:none; user-select:none; }
.gallery-item.icon img { width:340px; }
.gallery-controls { align-items:center; justify-content:space-between; margin:0 0 28px; gap:12px; }
.gallery-count { margin-right:auto; font-size:12px; color:var(--muted); }
.gallery-pagination { display:flex; gap:2px; }
.gallery-dot { width:20px; min-height:44px; border:0 !important; padding:0 !important; background:transparent !important; border-radius:0 !important; }
.gallery-dot::before { content:""; display:block; height:3px; width:100%; background:#dfe4d9; border-radius:2px; transition:background var(--motion); }
.gallery-dot[aria-current="true"]::before { background:#687e58; }
.gallery-controls > button { min-width:48px; min-height:44px; padding:8px 12px; }
.gallery-controls button:disabled { color:#a0a89b; cursor:default; opacity:.6; }
.store-button { min-height:44px; border-radius:8px; transition:background var(--motion),transform var(--motion); }
.store-button:not(:disabled):hover { background:#415e47; transform:translateY(-1px); }
.project-next { display:flex; justify-content:space-between; gap:18px; align-items:center; width:100%; padding:22px 0 0; margin:34px 0 0; border:0; border-top:1px solid var(--line); background:transparent; text-align:left; color:var(--ink); font-size:16px; }
.project-next small { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; }
.project-next > span:last-child { font-size:24px; color:#809270; }
.photo-viewer { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:20px 28px; border:0; color:#f8faf5; background:#142019f7; overflow:hidden; }
.photo-viewer[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:14px; animation:project-enter .2s ease-out; }
.photo-viewer::backdrop { background:#142019; }
.viewer-toolbar,.viewer-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.viewer-count { font-size:13px; }
.photo-viewer button { border:1px solid #ffffff45; color:white; background:#ffffff0c; min-width:64px; min-height:44px; padding:10px 18px; border-radius:30px; font-size:14px; }
.photo-viewer button:hover { background:#ffffff25; }
.photo-viewer button:disabled { opacity:.35; cursor:default; }
.viewer-stage { display:grid; place-items:center; min-height:0; overflow:hidden; touch-action:pan-y; }
.viewer-stage img { max-width:100%; max-height:100%; min-height:0; width:auto; height:auto; object-fit:contain; border-radius:4px; }
.viewer-controls { justify-content:center; padding-bottom:env(safe-area-inset-bottom); }
.will-reveal { opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.will-reveal.is-visible { opacity:1; transform:none; }
@keyframes project-enter { from { opacity:0; transform:translateY(16px) scale(.988); } to { opacity:1; transform:none; } }
@media(max-width:700px) {
  header::before { inset:8px -12px; border-radius:12px; }
  .brand { gap:9px; } .brand-name { font-size:13px; } .brand-name > span { font-size:12px; }
  .wordmark { width:38px; height:38px; font-size:15px; }
  .languages { padding:3px; gap:0; } .languages button { padding:8px 11px; font-size:13px; }
  .project-grid { gap:16px; }
  .copy-email { display:inline-flex; margin:16px 0 0; }
  .contact a { display:block; width:fit-content; }
  .project-dialog,.project-dialog:has(.project-gallery) { width:100%; max-width:100%; max-height:92dvh; margin:auto 0 0; border-radius:20px 20px 0 0; padding:24px 22px calc(24px + env(safe-area-inset-bottom)); border-bottom:0; }
  .dialog-top { top:-24px; margin:-24px -22px 24px; padding:14px 22px; }
  .project-dialog h2 { font-size:23px; }
  .gallery-item img { height:290px; }
  .gallery-item.icon img { width:290px; padding:50px; }
  .gallery-controls { gap:8px; flex-wrap:wrap; }
  .gallery-pagination { order:4; width:100%; justify-content:center; }
  .gallery-dot { width:22px; }
  .gallery-photo::after { opacity:1; }
  .photo-viewer { padding:14px; }
}
@media(max-width:359px) { .brand-name > span { display:none; } .brand-name { max-width:55px; } }
/* The cards stay quiet; the detail surface carries each project's character. */
[hidden] { display:none !important; }
.project-filters { display:flex; gap:8px; align-items:center; margin-bottom:22px; }
.project-filters button { border:1px solid transparent; border-radius:20px; padding:10px 17px; min-height:44px; background:transparent; color:var(--muted); font-size:14px; transition:background .2s,color .2s; }
.project-filters button:hover { background:#edf0e8; }
.project-filters button[aria-pressed="true"] { border-color:#d7dfcd; background:#e9eedf; color:#30472e; }
.filter-count { margin-left:auto; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.project-dialog { --project-accent:#556ecd; --project-tint:#edf2ff; --project-paper:#fcfdff; background:var(--project-paper) !important; }
.project-dialog[data-project="challang"] { --project-accent:#89683c; --project-tint:#f0e6d3; --project-paper:#fffaf1; --line:#e7dece; }
.dialog-top { background:color-mix(in srgb,var(--project-paper) 94%,transparent); border-color:var(--line); gap:12px; }
.dialog-actions { display:flex; gap:8px; align-items:center; }
.share-project { min-height:44px; border:0; border-radius:24px; padding:9px 14px; color:var(--project-accent); background:var(--project-tint); font-size:14px; }
.share-project:hover { filter:brightness(.96); }
.share-status { display:block; height:0; position:sticky; top:45px; z-index:6; text-align:right; font-size:12px; color:var(--project-accent); }
.share-status:not(:empty) { padding:8px 12px; height:auto; margin-bottom:12px; background:var(--project-tint); border-radius:6px; }
.share-status a { text-decoration:underline; overflow-wrap:anywhere; }
.dialog-cover { margin:0 0 27px; overflow:hidden; border-radius:4px; }
.detail-art { height:166px; padding:0; min-height:0; }
.detail-art.project-cover--praynote img { max-height:76px; border-radius:18px; }
.detail-art.project-cover--challang { background:#f1e8d7; }
.project-dialog .project-scripture { background:var(--project-tint); border-color:var(--project-accent); }
.project-dialog .gallery-dot[aria-current="true"]::before { background:var(--project-accent); }
.project-dialog .gallery-photo::after { color:var(--project-accent); }
.project-dialog .project-next > span:last-child { color:var(--project-accent); }
.sheet-handle { display:none; }
.project-dialog.is-dragging { animation:none; transition:none; }
.project-dialog.is-snapping { transition:transform .22s var(--ease); }
.project-dialog::backdrop { opacity:var(--sheet-backdrop,1); }
html.is-morphing .project-dialog[open] { animation:none; }
::view-transition-group(work-art),::view-transition-group(work-title) { animation-duration:.38s; animation-timing-function:cubic-bezier(.22,.68,0,1); }
::view-transition-old(work-art),::view-transition-new(work-art) { height:100%; object-fit:cover; }
::view-transition-old(work-title),::view-transition-new(work-title) { height:100%; width:100%; }
::view-transition-group(root) { animation-duration:.24s; }
.photo-viewer[open] { grid-template-rows:auto minmax(0,1fr) auto auto; }
.viewer-thumbnails { display:flex; justify-content:safe center; gap:8px; padding:4px 2px 9px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#819084 transparent; }
.photo-viewer .viewer-thumbnail { padding:3px; min-width:60px; width:60px; height:55px; min-height:0; border-radius:5px; border:1px solid #ffffff30; flex:0 0 60px; opacity:.55; }
.viewer-thumbnail img { width:100%; height:100%; object-fit:contain; border-radius:2px; }
.photo-viewer .viewer-thumbnail[aria-current="true"] { border-color:#efdb95; background:#fff2; opacity:1; }
.photo-viewer .viewer-thumbnail:hover { opacity:1; }
.project-video { margin:8px 0 30px; }
.video-poster { display:flex; position:relative; width:100%; aspect-ratio:16/9; align-items:center; justify-content:center; flex-direction:column; gap:14px; border:0; border-radius:8px; overflow:hidden; background:#29372e; color:white; }
.video-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.video-poster span { position:relative; z-index:1; font-size:15px; }
.video-poster .play-symbol { display:grid; place-items:center; height:50px; width:50px; border:1px solid #fff8; border-radius:50%; font-size:18px; background:#ffffff18; }
.video-frame { width:100%; aspect-ratio:16/9; border:0; border-radius:8px; display:block; }
.video-privacy,.video-fallback { margin:10px 0 0 !important; font-size:12px !important; color:var(--muted); }
.video-fallback a { text-decoration:underline; text-underline-offset:3px; }
.audio-preview { display:flex; align-items:center; gap:14px; width:100%; margin:4px 0 30px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--project-tint); color:var(--ink); text-align:left; }
.audio-preview small { display:block; font-size:12px; margin-top:4px; color:var(--muted); }
.audio-preview .play-symbol { font-size:18px; }
.mini-player { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); width:min(490px,calc(100% - 32px)); display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:7px 12px; align-items:center; padding:13px 16px; border:1px solid #d4ddce; border-radius:14px; background:#fffff9f5; color:var(--ink); box-shadow:0 8px 45px #263c3224; backdrop-filter:blur(20px); z-index:40; }
.mini-player button { padding:0; width:44px; height:44px; border:0; background:transparent; border-radius:50%; color:var(--ink); }
.mini-player .player-toggle { background:#e9eddf; }
.player-title { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-artist { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.player-seek { grid-column:2; width:100%; margin:0; accent-color:#708254; cursor:pointer; }
.player-time { grid-column:2; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.player-status { grid-column:1/-1; font-size:12px; color:#966036; }
.player-status:empty { display:none; }
.project-dialog > .mini-player { position:sticky; bottom:-20px; left:auto; transform:none; width:100%; margin:24px 0 0; z-index:8; }
body.has-audio footer { padding-bottom:145px; }
@media(max-width:700px) {
  .project-filters { gap:5px; margin-bottom:16px; }
  .project-filters button { padding:10px 15px; }
  .dialog-top { padding-top:35px; }
  .sheet-handle { display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:calc(50% - 50px); width:100px; height:32px; border:0; padding:0; background:transparent; touch-action:none; cursor:grab; }
  .sheet-handle span { width:34px; height:4px; border-radius:3px; background:#c5ccbf; pointer-events:none; }
  .sheet-handle:active { cursor:grabbing; }
  .detail-art { height:124px; }
  .detail-art.project-cover--praynote img { max-height:62px; }
  .dialog-cover { margin-bottom:24px; }
  .share-project { padding:9px 12px; font-size:13px; }
  .dialog-actions { gap:6px; }
  .dialog-top { gap:8px; }
  .share-status { top:60px; }
  .viewer-thumbnails { gap:6px; }
  .photo-viewer .viewer-thumbnail { width:50px; min-width:50px; flex-basis:50px; height:48px; }
  .mini-player { bottom:calc(12px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .will-reveal { opacity:1; transform:none; }
  .project-card:hover { transform:none; }
}