/* A single-screen temple composition. Form and member pages retain their own layouts. */
html:has(.temple-page) { height:100%; overflow:hidden; scroll-behavior:auto; }
.temple-page { --ink:#f5efe2; --blue:#e0c592; --muted:#a8b7bd; --line:#ffffff18; height:100%; overflow:hidden; color:#f5efe2; background:#102330; }
.temple-home { --composition-gutter:clamp(24px,4.5vw,84px); position:relative; isolation:isolate; display:grid; grid-template-rows:112px minmax(0,1fr) 130px; width:100%; height:100vh; height:100dvh; overflow:hidden; padding:env(safe-area-inset-top) max(0px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0px,env(safe-area-inset-left)); background:#102330; }
.temple-masthead { grid-area:1 / 1 / 2 / 2; position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px var(--composition-gutter); }
.temple-brand { display:flex; align-items:center; gap:14px; min-width:0; text-shadow:0 2px 18px #05111880; }
.brand-seal { position:relative; flex-shrink:0; filter:drop-shadow(0 4px 14px #03101c66) drop-shadow(0 0 12px #ffe5a71c); }
.brand-seal img { width:92px; height:92px; object-fit:contain; }
.brand-wordmark { font-size:22px; letter-spacing:.015em; font-weight:500; }
.brand-identity { display:flex; flex-direction:column; gap:4px; min-width:0; }
.brand-fullname { font-family:Georgia,'Times New Roman',serif; font-size:clamp(16px,2.5vw,42px); font-weight:400; line-height:1.15; letter-spacing:-.035em; color:#efe2c37a; white-space:nowrap; }
.brand-affiliation { font-size:12px; line-height:1.6; font-weight:400; letter-spacing:.035em; color:#efe2c366; white-space:nowrap; }
.temple-brand strong { font-weight:700; color:#e6d0a5; }
.masthead-year { position:absolute; right:var(--composition-gutter); color:#c7b58f; font-size:8px; letter-spacing:.2em; }
#temple-light-study { --night-opacity:1; --warm-opacity:0; --sun-x:12%; --sun-y:23%; --sun-size:2.1%; --sun-opacity:0; --stars-opacity:.7; --light-x:20%; --shadow-x:80%; --shadow-opacity:0; }
/* Fit the complete facade; its softly extended surroundings fill every screen. */
.temple-canvas { --facade-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='soft' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeMorphology operator='dilate' radius='1.2'/%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23soft)' fill='black' d='M50 1.6 78 13.3H86.4L86.1 18V93H13.9V18L13.6 13.3H22Z'/%3E%3C/svg%3E"); --scene-top:72px; --scene-bottom:116px; --scene-width:min(100cqw,calc((100cqh - var(--scene-top) - var(--scene-bottom))*1.777778)); --scene-height:calc(var(--scene-width)*.5625); --scene-middle:calc(var(--scene-top) + (100cqh - var(--scene-top) - var(--scene-bottom))/2); position:absolute; z-index:0; inset:0; overflow:hidden; isolation:isolate; container-type:size; }
/* Extend only the photograph's empty sky and paving, never a second facade. */
.canvas-ambient { position:absolute; inset:0; overflow:hidden; }
.atmosphere-sky,.atmosphere-ground { position:absolute; inset:-64px; filter:blur(46px) saturate(.94) contrast(1.03); }
.atmosphere-ground { top:calc(var(--scene-middle) + var(--scene-height)*.22); -webkit-mask-image:linear-gradient(transparent,#000 80px); mask-image:linear-gradient(transparent,#000 80px); }
.atmosphere-sky::before,.atmosphere-sky::after,.atmosphere-ground::before,.atmosphere-ground::after { content:''; position:absolute; inset:0; background-size:var(--scene-width) 10000%; background-position:center top; }
.atmosphere-sky::before,.atmosphere-ground::before { background-image:url('/assets/temple/temple-day-1600.webp'); }
.atmosphere-sky::after,.atmosphere-ground::after { background-image:url('/assets/temple/temple-evening-1600.webp'); opacity:var(--night-opacity); }
.atmosphere-ground::before,.atmosphere-ground::after { background-position:center bottom; }
.atmosphere-bamboo { display:none; }
@media(min-width:901px) and (min-aspect-ratio:4/3) {
  .atmosphere-bamboo { display:block; position:absolute; left:0; right:0; top:calc(var(--scene-middle) - var(--scene-height)*.53); height:calc(var(--scene-height)*1.1); background:url('/assets/temple/bamboo-panorama-v1.png') center / 100% 100% no-repeat; filter:brightness(var(--bamboo-brightness,.2)) saturate(.84); -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 90%,transparent); mask-image:linear-gradient(transparent,#000 14%,#000 90%,transparent); }
}
.exterior-scenes { position:absolute; left:50%; top:var(--scene-middle); transform:translate(-50%,-50%); width:var(--scene-width); aspect-ratio:16 / 9; }
.temple-canvas::after { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,#06151e9c 0%,#06151e0a 27%,transparent 48%,#07182044 66%,#071820ed 100%),radial-gradient(ellipse at 50% 42%,transparent 35%,#06151e28 100%); pointer-events:none; }
.temple-photographs { position:absolute; inset:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent); mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent); }
.temple-photographs-inner { position:absolute; inset:0; -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent),var(--facade-mask); mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent),var(--facade-mask); -webkit-mask-composite:source-over; mask-composite:add; }
.temple-scene { position:absolute; inset:0; display:block; }
.temple-scene img { width:100%; height:100%; object-fit:contain; filter:saturate(.94) contrast(1.03); }
.temple-scene[data-scene="day"] { opacity:1; }
.temple-scene[data-scene="evening"] { opacity:var(--night-opacity); }
.temple-lightwash { position:absolute; inset:0; opacity:var(--warm-opacity); background:radial-gradient(ellipse 72% 90% at var(--light-x) 32%,#ffe4b5 0%,#f5bd696b 30%,#ffdca51a 58%,transparent 80%); mix-blend-mode:soft-light; pointer-events:none; }
.temple-shadow { position:absolute; inset:0; opacity:var(--shadow-opacity); background:radial-gradient(ellipse 64% 72% at var(--shadow-x) 66%,#06121c 0%,#071826a6 26%,#091a2733 50%,transparent 76%); mix-blend-mode:multiply; pointer-events:none; }
/* One continuous foreground layer keeps both the sun and its halo free of cut edges. */
.temple-sky { position:absolute; inset:0; pointer-events:none; }
.sun-orbit { position:absolute; inset:0; pointer-events:none; }
.sun-disc,.sun-glow { position:absolute; left:var(--sun-x); top:var(--sun-y); transform:translate(-50%,-50%); aspect-ratio:1; border-radius:50%; pointer-events:none; }
.sun-disc { width:var(--sun-size); background:radial-gradient(circle at 45% 45%,#fffdf3 10%,#fff1cb 65%,#ffe5a7); opacity:var(--sun-opacity); }
.sun-glow { width:31%; background:radial-gradient(circle,#f8d28d6b 0%,#ffda9120 39%,transparent 70%); opacity:var(--sun-opacity); }
.temple-stars { position:absolute; inset:0; width:100%; height:100%; opacity:var(--stars-opacity); }
.temple-entry { grid-area:3 / 1 / 4 / 2; position:relative; z-index:2; min-width:0; padding:0 var(--composition-gutter); isolation:isolate; }
.welcome-row { display:flex; align-items:center; justify-content:space-between; gap:30px; height:110px; }
.welcome-copy h1 { font-size:clamp(32px,4.2vw,60px); font-weight:400; letter-spacing:-.055em; line-height:1.1; }
.welcome-copy h1 em { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:#e0c592; letter-spacing:-.04em; }
.welcome-copy p { font-family:Georgia,serif; color:#e2d2b2; font-size:12px; margin-top:11px; letter-spacing:.035em; }
.welcome-actions { display:flex; align-items:center; gap:38px; }
.welcome-actions a { display:flex; align-items:center; justify-content:space-between; gap:32px; min-width:130px; min-height:54px; padding:12px 4px; font-size:16px; font-weight:600; color:#f7f1e5; border:0; background:none; text-shadow:0 2px 12px #071820,0 1px 3px #071820; transition:color .2s; }
.welcome-actions a>span { font-size:20px; font-weight:400; line-height:1; }
.welcome-actions .welcome-login { color:#f4d9a7; }
.welcome-actions a:hover { color:#fff8e7; text-decoration:underline; text-underline-offset:6px; }
.temple-page :focus-visible { outline:2px solid #f3d79b; outline-offset:4px; }
@media(max-width:900px) {
  .temple-brand { padding-right:0; background:none; }
  .temple-home { grid-template-rows:100px minmax(0,1fr) 110px; }
  .welcome-row { height:90px; }
  .brand-seal img { width:80px; height:80px; }
  .masthead-year { display:none; }
  .welcome-actions a { min-width:125px; gap:25px; }
}
@media(max-aspect-ratio:4/3) {
  .temple-canvas { --scene-top:112px; --scene-bottom:156px; --scene-width:min(128cqw,calc((100cqh - var(--scene-top) - var(--scene-bottom))*1.777778)); }
}
@media(max-width:600px) and (orientation:portrait) {
  .temple-home { grid-template-rows:104px minmax(0,1fr) 167px; }
  .temple-canvas { --scene-top:116px; --scene-bottom:173px; }
  .temple-masthead { padding:12px 6%; align-items:flex-start; }
  .brand-seal img { height:72px; width:72px; }
  .temple-brand { align-items:center; gap:12px; width:100%; }
  .brand-fullname { font-size:clamp(9px,2.7vw,13px); letter-spacing:-.025em; }
  .brand-affiliation { font-size:clamp(7.5px,2.1vw,10px); letter-spacing:0; }
  .brand-wordmark { font-size:17px; }
  .temple-entry { padding:0 6%; }
  .welcome-row { height:141px; flex-direction:column; gap:16px; justify-content:center; text-align:center; }
  .welcome-copy h1 { font-size:clamp(28px,7.8vw,43px); }
  .welcome-copy p { margin-top:9px; font-size:11px; }
  .welcome-actions { width:100%; gap:10px; }
  .welcome-actions a { flex:1; min-width:0; min-height:46px; padding:11px 16px; justify-content:center; gap:20px; }
}
@media(max-width:360px) and (orientation:portrait) {
  .temple-canvas { --scene-top:104px; --scene-bottom:173px; }
  .brand-seal img { width:64px; height:64px; }
  .temple-home { grid-template-rows:94px minmax(0,1fr) 167px; }
  .welcome-row { height:141px; gap:16px; }
  .welcome-copy h1 { font-size:28px; }
}
@media(max-height:500px) and (min-aspect-ratio:6/5) {
  .temple-canvas { --scene-top:40px; --scene-bottom:72px; }
  .temple-home { grid-template-rows:58px minmax(0,1fr) 81px; }
  .temple-masthead { padding-block:4px; }
  .brand-seal img { width:48px; height:48px; }
  .brand-wordmark { font-size:14px; }
  .brand-fullname { font-size:clamp(14px,2.5vw,24px); }
  .brand-affiliation { font-size:8px; }
  .welcome-row { height:61px; }
  .welcome-copy h1 { font-size:27px; }
  .welcome-copy p { font-size:9px; margin-top:5px; }
  .welcome-actions a { min-height:42px; min-width:112px; padding:10px 14px; }
}
@media(prefers-reduced-motion:reduce) { .temple-page *, .temple-page *::before,.temple-page *::after { transition:none!important; animation:none!important; } }