html,body{height:100%}
*{box-sizing:border-box}
:root{
  --c-deep-red:#8A1C1C;
  --c-orange:#FF4500;
  --c-peach:#FECC9D;
  --c-pearl:#F3E5D1;
  --ink:var(--c-deep-red);
  --ink-soft:rgba(138,28,28,.74);
  --glass:rgba(243,229,209,.78);
  --glass-strong:rgba(243,229,209,.9);
  --shadow:rgba(35,6,6,.18);
  --shadow-strong:rgba(35,6,6,.32);
  --ease:cubic-bezier(.25,1,.5,1);
  --ease2:cubic-bezier(.2,.8,.2,1);
  --ring-persp:1400px;
  --ring-z:600px;
  --item:350px;
  --item-pad:22px;
  --radius:520px;
  --focus-scale:1.08;
  --ui-gap:18px;
  --border:rgba(138,28,28,.22);
  --border-2:rgba(138,28,28,.32);
  --bg0:#fff7ec;
  --bg1:linear-gradient(135deg, rgba(254,204,157,.85), rgba(243,229,209,.92));
  --bg2:radial-gradient(1200px 900px at 20% 15%, rgba(255,69,0,.14), transparent 58%), radial-gradient(900px 700px at 82% 72%, rgba(138,28,28,.12), transparent 60%), linear-gradient(135deg, rgba(243,229,209,.96), rgba(254,204,157,.78));
  --font:"Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --site-header-h:72px;
  --stage-top-clearance:22px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg0:#120606;
    --bg1:linear-gradient(135deg, rgba(138,28,28,.78), rgba(255,69,0,.24));
    --bg2:radial-gradient(1200px 900px at 20% 15%, rgba(255,69,0,.22), transparent 58%), radial-gradient(900px 700px at 82% 72%, rgba(254,204,157,.14), transparent 60%), linear-gradient(135deg, rgba(18,6,6,.98), rgba(68,12,12,.92));
    --glass:rgba(18,6,6,.56);
    --glass-strong:rgba(18,6,6,.82);
    --shadow:rgba(0,0,0,.28);
    --shadow-strong:rgba(0,0,0,.44);
    --border:rgba(243,229,209,.18);
    --border-2:rgba(243,229,209,.26);
    --ink:#F3E5D1;
    --ink-soft:rgba(243,229,209,.72);
  }
}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg2);
  color:var(--ink);
  overflow:hidden;
}
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 14px;
  background:var(--glass-strong);
  border:1px solid var(--border);
  border-radius:16px;
  z-index:50;
  box-shadow:0 14px 40px var(--shadow);
}
#ambient-layer{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.stage{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
  display:block;
  isolation:isolate;
}
.stage{
  height:calc(100% - var(--site-header-h, 70px));
  margin-top:var(--site-header-h, 70px);
}
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:12;
  padding:14px 20px 0;
  pointer-events:none;
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .24s var(--ease), transform .24s var(--ease), visibility 0s linear 0s;
}
body.overlay-active .site-header{
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.site-header__inner{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  border:1px solid var(--border);
  background:rgba(243,229,209,.34);
  box-shadow:0 10px 28px rgba(35,6,6,.08);
  backdrop-filter:blur(10px);
}
.site-header__title{
  text-align:center;
  color:var(--ink);
  font:700 20px/1 var(--font);
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:0 24px;
}
.hint{
  position:absolute;
  left:50%;
  top:20px;
  transform:translateX(-50%);
  z-index:3;
  pointer-events:none;
}
.hint-chip{
  background:rgba(243,229,209,.7);
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 14px;
  font-size:16px;
  letter-spacing:.2px;
  box-shadow:0 14px 40px var(--shadow);
  backdrop-filter:blur(10px);
}
@media (prefers-color-scheme: dark){
  .hint-chip{background:rgba(18,6,6,.55)}
}
@media (prefers-reduced-motion: reduce){
  .hint{display:none}
}
.back-btn[hidden]{display:none}
.back-btn{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--glass-strong);
  color:var(--ink);
  font:600 18px/1 var(--font);
  letter-spacing:.2px;
  box-shadow:0 18px 50px var(--shadow);
  backdrop-filter:blur(12px);
  cursor:pointer;

  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;}
.back-btn:focus-visible{outline:3px solid rgba(255,69,0,.36); outline-offset:3px}
.back-label{font-weight:600}


/* === Palette Scrollbar (Global) === */
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(255, 220, 190, 0.4);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d86a3a, #b3472f);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e07842, #c04b32);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #c04b32 rgba(255, 220, 190, 0.4);
}


.back-ico{display:block}


/* === Icon + Gallery widgets === */
.icon-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
@media (min-width: 760px){
  .icon-grid{grid-template-columns:repeat(4, minmax(0,1fr))}
}
.icon-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.26);
  box-shadow:0 18px 50px var(--shadow);
}
.icon-card img{
  width:52px;
  height:52px;
  flex:0 0 52px;
  opacity:.92;
}
.icon-card .meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.icon-card .meta strong{font:700 16px/1.15 var(--font); color:var(--ink)}
.icon-card .meta span{font:500 13px/1.25 var(--font); color:var(--muted)}

.gallery-strip{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:12px;
}
@media (min-width: 760px){
  .gallery-strip{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.gallery-strip img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 18px 50px var(--shadow);
}


.social-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.10);
  color:var(--ink);
  text-decoration:none;
  font:600 14px/1 var(--font);
  box-shadow:0 14px 40px var(--shadow);
}
.social-link svg{width:18px;height:18px;display:block}
.social-link:focus-visible{outline:3px solid rgba(255,69,0,.26); outline-offset:3px}