/* THE SANCTUARY theme for personal.html#philosophy -- active only while
   body.theme-sanctuary is set by assets/personal-sanctuary.js.
   v1 (2026-10-16): a Greek temple at night lit by two torches. Finished
   marble columns = ideas Audi lives by (core), columns in scaffolding =
   ideas being studied, scrolls in the forecourt = ideas kept for reference. */

body.theme-sanctuary {
    --ph-marble: #f1ebdf; --ph-marble-d: #b9b09f; --ph-ink: #2a2318; --ph-text: #f3eee4; --ph-sub: #c4bcad;
    --ph-gold: #e2c98f; --ph-amber: #f2b45a; --ph-stone: #9aa1ad; --ph-night: #070a14;
    background:
        radial-gradient(1px 1px at 14% 12%, rgba(255,255,255,0.75), transparent 60%),
        radial-gradient(1px 1px at 71% 8%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1.4px 1.4px at 38% 22%, rgba(255,255,255,0.55), transparent 60%),
        radial-gradient(1px 1px at 88% 26%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(ellipse 70% 45% at 50% 0%, #1b2347 0%, #0d1226 55%, #070a14 100%) fixed #070a14;
    background-size: 340px 340px, 410px 410px, 380px 380px, 450px 450px, auto;
}
body.theme-sanctuary .gallery-wrap { max-width: 1120px; padding: 0 20px 5rem; }
body.theme-sanctuary .back-bar,
body.theme-sanctuary .hero-title,
body.theme-sanctuary .hero-sub,
body.theme-sanctuary .category-view-header,
body.theme-sanctuary .pcms-admin-only[onclick="openDraftModal()"],
body.theme-sanctuary[data-ph-cat="philosophy"] .gallery-section[data-category="philosophy"] { display: none !important; }

#sanctuaryView { display: none; position: relative; overflow-x: clip; font-family: 'Outfit', 'Mitr', var(--font-body, 'Plus Jakarta Sans', 'Sarabun'), sans-serif; color: var(--ph-text); }
body.theme-sanctuary #sanctuaryView { display: block; }
#sanctuaryView button { font: inherit; color: inherit; }
#sanctuaryView button:focus-visible { outline: 2px solid var(--ph-gold); outline-offset: 4px; }

.ph-btn { border: 1px solid rgba(226,201,143,0.55); background: transparent; border-radius: 999px; padding: 10px 18px; cursor: pointer; font-weight: 600; transition: transform .2s cubic-bezier(.22,1,.36,1); }
.ph-btn.is-gold { background: var(--ph-gold); color: #1d1606 !important; border-color: var(--ph-gold); box-shadow: 0 4px 8px rgba(0,0,0,0.35); }
.ph-btn:hover { transform: translateY(-2px); }

/* ---------- torches: warm light from both sides ---------- */
.ph-torch { position: absolute; top: 300px; width: 10px; height: 60px; border-radius: 3px; background: linear-gradient(180deg, #6b4a2a, #3a2716); pointer-events: none; z-index: 0; }
.ph-torch.is-l { left: 0; } .ph-torch.is-r { right: 0; }
.ph-torch i { position: absolute; left: 50%; bottom: 100%; width: 20px; height: 30px; margin-left: -10px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
    background: radial-gradient(ellipse at 50% 75%, #fff3c4 0%, #ffbf4f 45%, rgba(255,120,30,0) 75%); filter: drop-shadow(0 0 10px rgba(255,170,60,0.85)); transform-origin: 50% 100%; animation: ph-flicker 1.6s ease-in-out infinite alternate; }
.ph-torch::after { content: ''; position: absolute; left: 50%; top: -40px; width: 380px; height: 380px; margin-left: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(255,170,70,0.16), rgba(255,170,70,0) 65%); }
@keyframes ph-flicker { 0% { transform: scale(1, 1) rotate(-2deg); opacity: .92; } 50% { transform: scale(.94, 1.08) rotate(2deg); opacity: 1; } 100% { transform: scale(1.04, .95) rotate(-1deg); opacity: .88; } }

/* ---------- header ---------- */
.ph-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 28px 0 8px; }
.ph-back { justify-self: start; background: none; border: 0; cursor: pointer; color: var(--ph-sub) !important; font-size: .98rem; padding: 8px 0; min-height: 44px; }
.ph-back span { display: inline-block; font-size: 1.3rem; line-height: 1; margin-right: 3px; transition: transform .25s ease; }
.ph-back:hover { color: var(--ph-text) !important; } .ph-back:hover span { transform: translateX(-3px); }
.ph-top-r { justify-self: end; }
.ph-brand { text-align: center; max-width: 560px; }
.ph-brand p { margin: 0; font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif; font-size: 1rem; font-weight: 600; letter-spacing: .32em; color: var(--ph-gold); }
.ph-brand h2 { margin: 4px 0 6px; font-family: 'Cormorant Garamond', 'Trirong', Georgia, serif; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 600; font-style: italic; line-height: 1.08; color: var(--ph-marble); text-wrap: balance; }
.ph-brand small { display: block; font-family: 'Sarabun', sans-serif; font-size: .95rem; line-height: 1.6; color: var(--ph-sub); text-wrap: pretty; }

/* ---------- legend = filter chips ---------- */
.ph-legend { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 26px; }
.ph-chip { min-height: 40px; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(241,235,223,0.28); background: rgba(13,18,38,0.85); color: var(--ph-text) !important; cursor: pointer; font-size: .92rem; transition: background .2s ease, border-color .2s ease; }
.ph-chip i { font-style: normal; font-weight: 700; margin-left: 4px; opacity: .85; }
.ph-chip.is-pillar { border-color: rgba(226,201,143,0.55); }
.ph-chip.is-build { border-color: rgba(242,180,90,0.55); }
.ph-chip.is-scroll { border-color: rgba(154,161,173,0.6); }
.ph-chip:hover { background: rgba(241,235,223,0.1); }
.ph-chip.is-on { background: var(--ph-marble); color: var(--ph-ink) !important; border-color: var(--ph-marble); }

/* ---------- the temple ---------- */
.ph-temple { position: relative; z-index: 1; margin: 0 auto; max-width: 1000px; }
.ph-pediment { position: relative; height: clamp(56px, 9vw, 96px); margin: 0 -14px; clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #fbf6ec, #d9d0bf); display: grid; place-items: end center; padding-bottom: 8px; }
.ph-pediment::after { content: ''; position: absolute; inset: 9px 30px 6px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #cfc5b2, #b8ad98); }
.ph-pediment span { position: relative; z-index: 1; font-size: clamp(1.2rem, 2.6vw, 1.8rem); }
.ph-frieze { margin: 0 -14px; padding: 10px 14px 9px; text-align: center; background: linear-gradient(180deg, #ece5d7, #cfc6b4); border-top: 3px solid #fffaf0; border-bottom: 4px solid #a99f8c; color: var(--ph-ink); }
.ph-frieze span { display: block; font-family: 'Cormorant SC', Georgia, serif; font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.5rem); letter-spacing: .3em; }
.ph-frieze small { display: block; font-family: 'Sarabun', sans-serif; font-size: .82rem; color: #4a4030; }

.ph-colonnade { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 0 14px; padding: 0 4px; }
.ph-cell, .ph-slot { width: clamp(150px, 22%, 210px); }
.ph-slot > .ph-cell { width: 100%; }
.ph-cell { display: flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0 0 18px; cursor: pointer; text-align: center; position: relative; }
.ph-cell.is-ghost { cursor: default; }
button.ph-cell.is-ghost { cursor: pointer; }


.ph-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: clamp(240px, 32vw, 330px); }
.ph-capital { display: block; width: 76%; height: 22px; background: linear-gradient(180deg, #fffaf0, #d6cdbb); border-radius: 2px; position: relative; flex: none; }
.ph-capital::after { content: ''; position: absolute; left: 12%; right: 12%; top: 100%; height: 12px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #e9e2d3, #bdb3a0); }
.ph-shaft { position: relative; display: flex; justify-content: center; align-items: flex-start; flex: 1; width: 68%; margin-top: 12px; padding: 12px 0 14px;
    background:
        repeating-linear-gradient(90deg, rgba(60,48,30,0.1) 0 2px, rgba(0,0,0,0) 2px 9px),
        linear-gradient(90deg, #a79e8c 0%, #e7e0d1 30%, #fffbf2 50%, #e2dacb 70%, #9c9381 100%); }
.ph-base { display: block; width: 72%; height: 16px; flex: none; background: linear-gradient(180deg, #e7e0d1, #b2a893); border-radius: 3px 3px 0 0; }
/* arched niche frame: fills the shaft like a statue alcove (Audi 2026-10-16: the small circle left most of the column empty) */
.ph-medal { display: grid; place-items: center; box-sizing: border-box; width: calc(100% - 12px); height: 100%; border-radius: 999px 999px 6px 6px; overflow: hidden; background: #f6f0e3; border: 3px solid var(--ph-gold); box-shadow: inset 0 0 0 2px rgba(255,250,240,0.6), 0 4px 10px rgba(0,0,0,0.4); font-size: clamp(2.4rem, 4vw, 3.2rem); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.ph-medal img { width: 100%; height: 100%; object-fit: cover; }

/* under construction: shorter stacked drums inside timber scaffolding */
.ph-cell.is-build .ph-shaft { flex: none; height: 52%; margin-top: 0; padding: 10px 0 12px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 0 31%, rgba(40,30,18,0.55) 31% 33%, rgba(0,0,0,0) 33% 64%, rgba(40,30,18,0.55) 64% 66%, rgba(0,0,0,0) 66%),
        repeating-linear-gradient(90deg, rgba(60,48,30,0.1) 0 2px, rgba(0,0,0,0) 2px 9px),
        linear-gradient(90deg, #a79e8c 0%, #e7e0d1 30%, #fffbf2 50%, #e2dacb 70%, #9c9381 100%); }
.ph-cell.is-build .ph-medal { border-color: var(--ph-amber); }
.ph-scaffold { position: absolute; left: 10%; right: 10%; bottom: 16px; height: 78%; z-index: 1; pointer-events: none;
    border-left: 4px solid #8a6238; border-right: 4px solid #8a6238;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 0 22%, #8a6238 22% calc(22% + 4px), rgba(0,0,0,0) calc(22% + 4px) 58%, #8a6238 58% calc(58% + 4px), rgba(0,0,0,0) calc(58% + 4px)); }
.ph-scaffold::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 58%; background: linear-gradient(to top right, rgba(0,0,0,0) calc(50% - 2px), #6f4d2b calc(50% - 2px) calc(50% + 1px), rgba(0,0,0,0) calc(50% + 1px)); }

/* ghost slot: dashed outline of a column not yet raised */
.ph-cell.is-ghost .ph-shaft { flex: none; height: 70%; margin-top: 0; padding-top: 0; align-items: center; background: none; border: 2px dashed rgba(241,235,223,0.3); border-bottom: 0; }
.ph-cell.is-ghost .ph-shaft em { font-style: normal; font-size: 2rem; color: var(--ph-gold); }
.ph-cell.is-ghost .ph-base { background: rgba(241,235,223,0.14); }
.ph-cell.is-ghost .ph-plinth { background: rgba(13,18,38,0.85); color: var(--ph-sub); border-color: rgba(241,235,223,0.2); }
.ph-cell.is-ghost .ph-plinth b { font-weight: 500; font-size: .9rem; }

/* plinth: engraved name plate, paper-light with dark ink */
.ph-plinth { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; align-self: stretch; margin-top: 0; padding: 10px 8px 11px; background: linear-gradient(180deg, #f6f0e3, #e3dacb); border: 1px solid #bfb4a0; border-bottom: 4px solid #a99f8c; border-radius: 0 0 6px 6px; color: var(--ph-ink); }
.ph-plinth b { font-family: 'Mitr', 'Outfit', sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.3; overflow-wrap: break-word; }
.ph-badge { white-space: nowrap; font-family: 'Sarabun', sans-serif; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #3b3120; color: #f7e3b4; }
.ph-cell.is-build .ph-badge { background: #7a4a0c; color: #fff1d6; }
.ph-stars { font-size: .82rem; letter-spacing: 1px; color: #9a6a12; } .ph-stars i { font-style: normal; color: #c9bfae; }
.ph-stars em { font-style: normal; font-family: 'Sarabun', sans-serif; font-weight: 700; letter-spacing: 0; margin-left: 5px; color: #4a4030; }

/* hover = torchlight lands on the column */
.ph-cell:not(.is-ghost):hover .ph-shaft { filter: brightness(1.07) sepia(.12); }
.ph-cell:not(.is-ghost):hover .ph-medal { transform: translateY(-3px); }
.ph-cell:not(.is-ghost):hover .ph-plinth { border-bottom-color: var(--ph-gold); }
button.ph-cell.is-ghost:hover .ph-shaft { border-color: var(--ph-gold); }

.ph-steps { display: grid; gap: 0; margin: -18px -14px 0; }
.ph-steps i { display: block; height: 12px; background: linear-gradient(180deg, #d9d0bf, #a99f8c); }
.ph-steps i:nth-child(2) { margin: 0 -14px; } .ph-steps i:nth-child(3) { margin: 0 -28px; }

.ph-empty, .ph-none { text-align: center; color: var(--ph-sub); font-family: 'Sarabun', sans-serif; font-size: 1rem; margin: 22px auto 0; max-width: 46ch; }
.ph-empty-cta { text-align: center; margin: 14px 0 0; }

/* columns rise from the stylobate once, on first view */
.ph-temple .ph-col { transform-origin: 50% 100%; }
.ph-temple:not(.is-risen) .ph-col { transform: scaleY(.04); opacity: 0; }
.ph-temple.is-risen .ph-col { transition: transform .9s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 90ms), opacity .4s ease calc(var(--i, 0) * 90ms); }

/* ---------- forecourt: scrolls kept for reference ---------- */
.ph-court { position: relative; z-index: 1; margin: 46px 0 0; }
.ph-court h3 { font-family: 'Mitr', sans-serif; font-weight: 500; font-size: 1.3rem; color: var(--ph-marble); margin: 0 0 14px; text-align: center; }
.ph-court h3 small { display: block; font-family: 'Sarabun', sans-serif; font-size: .9rem; font-weight: 400; color: var(--ph-sub); }
.ph-scrolls { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ph-scrolls > .ph-scroll { width: min(100%, 270px); }
.ph-scroll { display: flex; align-items: stretch; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.ph-scroll:hover { transform: translateY(-3px) rotate(-.4deg); }
.ph-rod { width: 12px; flex: none; border-radius: 6px; background: linear-gradient(90deg, #5a3d22, #a7784a 50%, #5a3d22); margin: -6px 0; }
.ph-paper { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 13px; background: linear-gradient(90deg, #e4d4ae, #f6ecd4 12%, #fbf4e3 50%, #f6ecd4 88%, #e4d4ae); color: var(--ph-ink); }
.ph-paper b { font-family: 'Mitr', sans-serif; font-weight: 500; font-size: 1.02rem; }
.ph-paper span { font-family: 'Sarabun', sans-serif; font-size: .9rem; line-height: 1.5; color: #3a3122; }

/* ---------- detail modal accent ---------- */
#galleryModal[data-category="philosophy"] { --pe-accent: #e2c98f; }

/* ---------- owner: reframe the photo on the pillar ---------- */
.ph-slot { position: relative; display: flex; }
.ph-fbtn { min-height: 34px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(226,201,143,0.6); background: rgba(13,18,38,0.92); color: var(--ph-text) !important; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,0.45); }
.ph-fbtn:hover { border-color: var(--ph-gold); background: #1b2347; }
.ph-fbtn.is-save { background: var(--ph-gold); color: #1d1606 !important; border-color: var(--ph-gold); }
.ph-fbtn:disabled { opacity: .7; cursor: progress; }
.ph-fbtn.is-start { position: absolute; z-index: 3; left: 50%; top: 52px; transform: translateX(-50%); opacity: .92; }
.ph-frame-bar { position: absolute; z-index: 3; left: 50%; top: calc(clamp(240px, 32vw, 330px) + 4px); transform: translateX(-50%); display: flex; gap: 6px; }
.ph-frame-hint { position: absolute; z-index: 3; left: 50%; top: 52px; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: rgba(13,18,38,0.92); color: var(--ph-gold); font: 600 .74rem/1.5 'Sarabun', sans-serif; white-space: nowrap; pointer-events: none; }
.ph-frame-hint kbd { font: inherit; }
.ph-slot.is-framing .ph-cell { cursor: default; }
.ph-slot.is-framing .ph-plinth { padding-top: 48px; } /* room for the save bar, card name stays visible */
.ph-slot.is-framing .ph-medal { border-style: dashed; box-shadow: 0 0 0 3px rgba(226,201,143,0.35), 0 4px 10px rgba(0,0,0,0.4); }
.ph-slot.is-framing .ph-medal img { cursor: grab; touch-action: none; }
.ph-slot.is-framing .ph-medal img:active { cursor: grabbing; }
.ph-slot.is-framing:hover .ph-medal { transform: none; }
.ph-toast { position: fixed; z-index: 9999; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; background: #141a33; border: 1px solid rgba(226,201,143,0.55); color: #f3eee4; font: 500 .95rem/1.4 'Sarabun', sans-serif; box-shadow: 0 8px 22px rgba(0,0,0,0.5); }
.ph-toast button { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 0; background: #e2c98f; color: #1d1606; font-weight: 700; cursor: pointer; }

@media (max-width: 640px) {
    .ph-top { grid-template-columns: 1fr; text-align: center; padding-top: 18px; }
    .ph-back, .ph-top-r { justify-self: center; }
    .ph-colonnade { gap: 0 8px; justify-content: center; }
    .ph-cell, .ph-slot { width: calc(50% - 4px); }
    .ph-slot > .ph-cell { width: 100%; }
    .ph-col { height: 250px; }
    .ph-frame-bar { top: 254px; gap: 4px; }
    .ph-frame-bar .ph-fbtn { padding: 4px 8px; font-size: .74rem; }
    .ph-plinth { padding: 9px 4px 10px; }
    .ph-plinth b { font-size: .8rem; }
    .ph-badge { font-size: .7rem; padding: 2px 7px; }
    .ph-torch { display: none; }
    .ph-pediment, .ph-frieze { margin: 0 -6px; }
    .ph-steps { margin: -18px -6px 0; }
    .ph-steps i:nth-child(2) { margin: 0 -4px; } .ph-steps i:nth-child(3) { margin: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-torch i { animation: none; }
    .ph-temple .ph-col, .ph-temple:not(.is-risen) .ph-col { transform: none; opacity: 1; transition: none; }
    .ph-medal, .ph-scroll, .ph-btn, .ph-back span { transition: none; }
}
/* 5-star pillar = MASTERPIECE badge (same word as Books/Quotes) */
.ph-master { display: inline-block; margin: 2px auto 4px; padding: 2px 10px; border-radius: 999px; font: 800 .7rem/1.5 "Space Grotesk", Sarabun, sans-serif; letter-spacing: .04em; color: #3b2a06; background: linear-gradient(135deg, #f6d365, #d4a017); box-shadow: 0 2px 8px rgba(180, 130, 20, .3); }