/* Kanchan: a brass lamp inside a gold medallion, and the lamp-lighting opening. Page, type and sections come from base.css. */
:root{--gold-deep:#8A6A24}

/* ---------- the lamp (shared by the opening, the hero crest and the footer) ---------- */
.lamp{position:relative;width:min(74vw,290px);aspect-ratio:1;margin:0 auto}
.medal{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:k-spin 120s linear infinite}
.medal .dr{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes k-spin{to{transform:rotate(360deg)}}
.glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(255,206,110,.5) 0%,rgba(255,190,90,.16) 38%,transparent 66%);animation:k-breathe 3.6s ease-in-out infinite}
@keyframes k-breathe{50%{transform:scale(1.07);opacity:.82}}
.diya{position:absolute;left:50%;top:48%;width:38%;margin-left:-19%;display:block;border:0;background:none;padding:0;color:inherit;-webkit-tap-highlight-color:transparent}
.bowl{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
.flame{position:absolute;left:50%;bottom:calc(100% - 9%);width:25%;margin-left:-12.5%;height:auto;transform-origin:50% 96%;animation:k-flicker 1.7s ease-in-out infinite}
@keyframes k-flicker{0%,100%{transform:scale(1) skewX(0)}18%{transform:scale(.97,1.05) skewX(-2.5deg)}37%{transform:scale(1.02,.96) skewX(1.5deg)}55%{transform:scale(.98,1.07) skewX(2.5deg)}76%{transform:scale(1.01,.98) skewX(-1.5deg)}}
.ember{display:none}

/* ---------- opening: dark, until the lamp is lit ---------- */
.js .topen{background:radial-gradient(120% 80% at 50% 42%,#3A2910 0%,#1E1508 62%,#120C04 100%);color:#F1DFAE}
.topen .glow{opacity:0;transform:scale(.3);animation:none;transition:opacity 1s ease .25s,transform 1.4s var(--ease) .25s}
.topen .medal .dr{stroke-dashoffset:1}
.topen .medal .dots{opacity:0}
.topen .flame{transform:scale(0);animation:none}
.topen .diya{cursor:pointer;animation:k-wait 2.8s ease-in-out infinite}
@keyframes k-wait{50%{transform:translateY(-4px)}}
/* a small glowing wick tip that invites the tap */
.topen .ember{display:block;position:absolute;left:50%;bottom:calc(100% - 6%);width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#FF9A2E;box-shadow:0 0 12px 4px rgba(255,154,46,.55);animation:k-ember 1.6s ease-in-out infinite}
@keyframes k-ember{50%{opacity:.35;transform:scale(.7)}}
.halo{position:absolute;left:25%;top:25%;width:50%;height:50%;border-radius:50%;border:1px solid #E8CF86;opacity:0;pointer-events:none}
.flood{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:radial-gradient(circle,var(--from) 0 56%,transparent 71%);transform:scale(0);pointer-events:none;will-change:transform}

/* lit */
.topen.open .diya{animation:none;pointer-events:none}
.topen.open .ember{display:none}
.topen.open .flame{animation:k-light .75s var(--spring) both,k-flicker 1.7s ease-in-out .75s infinite}
@keyframes k-light{0%{transform:scale(0)}55%{transform:scale(1.25,1.4)}100%{transform:scale(1)}}
.topen.open .glow{opacity:1;transform:scale(1)}
.topen.open .medal .dr{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease);transition-delay:calc(.3s + var(--i) * 70ms)}
.topen.open .medal .dots{opacity:1;transition:opacity .6s ease 1.3s}
.topen.open .halo{animation:k-halo 1.5s ease-out .75s both}
.topen.open .halo:nth-of-type(3){animation-delay:1s}
.topen.open .halo:nth-of-type(4){animation-delay:1.25s}
@keyframes k-halo{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(2.5)}}
/* the light grows until it is the whole screen, in the colour of the page underneath */
.topen.open .flood{transform:scale(64);transition:transform .95s cubic-bezier(.6,0,.85,.4) 1.55s}

/* ---------- page ---------- */
.thero{padding-top:54px}
.frame{left:12px;top:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
.crest{width:min(46vw,188px)}
.crest.sm{width:92px}
.crest.sm .diya{width:56%;margin-left:-28%;top:44%}
.thero-in{padding-top:18px;padding-bottom:6px}
.names{color:var(--gold-deep)}
h2,.tl time{color:var(--gold-deep)}
h2::before,h2::after{content:"";display:inline-block;width:7px;height:7px;margin:0 14px;border:1px solid var(--line);transform:rotate(45deg);vertical-align:middle}
/* the hero text sits in the middle of the space under the lamp */
.thero-in>:first-child{margin-top:auto}
/* unlit: only a faint ring shows where the medallion will appear */
.topen .lamp::before{content:"";position:absolute;inset:25.4%;border-radius:50%;border:1px solid rgba(232,207,134,.16);transition:opacity .6s ease}
.topen.open .lamp::before{opacity:0}

/* ===== countdown: set like fine print. Tall serif numerals between two gold rules, parted by small diamonds. ===== */
.count{display:flex;justify-content:center;gap:0;max-width:340px;padding:20px 0 16px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  box-shadow:0 -4px 0 -3px color-mix(in srgb,var(--line) 45%,transparent),0 4px 0 -3px color-mix(in srgb,var(--line) 45%,transparent)}
.count div{position:relative;flex:1;border:0;border-radius:0;background:none;box-shadow:none;padding:0}
.count div+div::before{content:"";position:absolute;left:-3.5px;top:17px;width:7px;height:7px;background:var(--line);transform:rotate(45deg)}
.count b{font-family:'Fraunces',serif;font-weight:500;font-size:40px;line-height:1;color:var(--gold-deep)}
.count span{display:block;margin-top:8px;font-size:9.5px;letter-spacing:.2em;color:var(--ink)}
.script .count span{font-size:12px}
/* ===== functions: a printed programme. One ivory sheet, each function a row with its day set large on the left. ===== */
.tl{gap:0;padding:8px 22px;max-width:344px;background:#FFFCF1;box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent),0 0 0 5px #FFFCF1,0 0 0 6px color-mix(in srgb,var(--line) 45%,transparent),0 16px 34px rgba(110,80,20,.14)}
.tl-line,.tl-dot{display:none}
.tl li{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:center;padding:20px 0;border:0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid color-mix(in srgb,var(--line) 38%,transparent)}
.tl li:last-child{border-bottom:0}
.tl li.main{background:none}
.tl .ev-date{display:flex;padding-right:16px;border-right:1px solid var(--line);color:var(--gold-deep)}
.tl .ev-date b{font-family:'Fraunces',serif;font-weight:500;font-size:32px}
.tl .ev-date i{margin-top:4px;color:var(--ink)}
.tl .ev-full,.tl .ev-sep{display:none}
.tl time{letter-spacing:.16em;font-size:11px}
.ev-body>b{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:23px;line-height:1.2;margin:2px 0}
.script .ev-body>b{font-family:var(--ui),sans-serif;font-style:normal;font-weight:600;font-size:20px}
.tl li.main .ev-body>b::after{content:" ✦";font-style:normal;font-size:.6em;color:var(--line);vertical-align:middle}
.js .tl li.rv{transform:translateY(16px)}
.count b{font-size:36px}

/* ===== family, notes and function drawings in Kanchan's colours ===== */
:root{--accent:#8A6A24}
.family h3{color:var(--gold-deep)}
.family{padding:26px 0;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.letter{background:#FFFCF1;border-radius:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent),0 0 0 5px #FFFCF1,0 0 0 6px color-mix(in srgb,var(--line) 45%,transparent),0 14px 30px rgba(110,80,20,.12);border:0}
.ev-art{width:36px;height:36px}
h2{font-size:25px}
h2::before,h2::after{margin:0 9px;width:6px;height:6px}