/* Concept-match layer for Christmas on Pixelwolf.
   This stylesheet intentionally sits after site.css and turns the functional
   retro layout into the dense illustrated Christmas-card look from the approved concept. */

:root{
  --concept-paper:#fff7df;
  --concept-paper-deep:#eed9a8;
  --concept-red:#9f111b;
  --concept-red-bright:#c71d28;
  --concept-green:#0d5138;
  --concept-green-dark:#073b2b;
  --concept-gold:#d4aa52;
  --concept-gold-light:#f3d77d;
  --concept-ink:#37281f;
}

body{
  background:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.13) 0 2px,transparent 3px) 0 0/36px 36px,
    radial-gradient(circle at 85% 45%,rgba(255,255,255,.08) 0 1px,transparent 2px) 0 0/24px 24px,
    linear-gradient(#061b16,#020d0a 72%);
}

.page-frame{
  width:min(1540px,100%);
  background:#efe5c9;
  border-inline:3px ridge #a67b32;
  box-shadow:0 0 70px #000;
}

/* ---------- Illustrated masthead ---------- */
.header-sky{
  min-height:470px!important;
  background-image:
    linear-gradient(to bottom,rgba(4,20,36,.05),rgba(5,30,22,.08)),
    url('/assets/generated/home/main-hero-christmas.svg')!important;
  background-position:center 39%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  border-bottom:8px ridge var(--concept-gold)!important;
  box-shadow:inset 0 -28px 38px rgba(8,44,33,.36);
}
.header-sky:before{
  height:88px!important;
  bottom:-2px!important;
  opacity:1!important;
  background:
    linear-gradient(transparent 0 25%,rgba(7,65,42,.15) 26%),
    repeating-linear-gradient(140deg,#0b5137 0 14px,#103d30 14px 28px)!important;
  clip-path:polygon(0 35%,2% 18%,4% 36%,6% 14%,8% 37%,10% 17%,12% 37%,14% 13%,16% 37%,18% 17%,20% 37%,22% 14%,24% 37%,26% 18%,28% 37%,30% 14%,32% 37%,34% 18%,36% 37%,38% 14%,40% 37%,42% 18%,44% 37%,46% 14%,48% 37%,50% 17%,52% 37%,54% 14%,56% 37%,58% 18%,60% 37%,62% 14%,64% 37%,66% 18%,68% 37%,70% 14%,72% 37%,74% 18%,76% 37%,78% 14%,80% 37%,82% 18%,84% 37%,86% 14%,88% 37%,90% 18%,92% 37%,94% 14%,96% 37%,98% 18%,100% 35%,100% 100%,0 100%)!important;
}
.header-sky:after{
  height:52px!important;
  bottom:0!important;
  background:
    radial-gradient(circle,#d11b28 0 5px,#ffd864 6px 8px,transparent 9px) 0 8px/42px 26px,
    linear-gradient(transparent,#0b5237 95%)!important;
  filter:drop-shadow(0 0 5px #ffd35a)!important;
}

.brand-sign{
  top:24px!important;
  width:min(520px,50vw)!important;
  padding:18px 30px 16px!important;
  background:
    radial-gradient(circle at 22% 20%,rgba(255,255,255,.6),transparent 24%),
    linear-gradient(90deg,#d9bf89,#fff4cf 16%,#f8e7b9 78%,#d4b47a)!important;
  border:7px ridge #9c702f!important;
  border-radius:5px!important;
  box-shadow:0 9px 0 rgba(63,34,17,.32),0 14px 26px #0009!important;
}
.brand-sign:before,.brand-sign:after{
  content:"✦  ❄  ✦"!important;
  top:-20px!important;
  color:#0a6844!important;
  font-size:19px!important;
}
.brand-title{
  color:#8d151d!important;
  font-size:clamp(2.6rem,4vw,4.45rem)!important;
  line-height:.8!important;
  letter-spacing:-.035em;
  text-shadow:1px 2px #fff9e7!important;
}
.brand-title small{color:#174c34!important;font-size:.42em!important}
.brand-kicker{color:#155c3e!important}
.brand-tagline{font-size:16px!important;color:#5c3c28!important}

.header-plaque{
  top:150px!important;
  width:188px!important;
  padding:15px 14px!important;
  background:linear-gradient(#f7e8bc,#dabb81)!important;
  border:5px ridge #8c642c!important;
  box-shadow:6px 8px 14px #0008!important;
}
.header-plaque-left{left:34px!important}.header-plaque-right{right:34px!important}
.header-gif-tree{left:245px!important;bottom:42px!important}.header-gif-snowman{right:245px!important;bottom:46px!important}

.main-nav{
  padding:3px 12px!important;
  background:linear-gradient(#b81a25,#811019)!important;
  border-block:4px ridge #dfbd62!important;
  box-shadow:0 5px 12px rgba(0,0,0,.35);
}
.main-nav a{
  min-height:46px;
  display:flex!important;
  align-items:center;
  color:#fff8df!important;
  padding:.68rem 1rem!important;
  border-inline:1px solid #d86d72!important;
  text-shadow:0 1px #540b10!important;
}
.main-nav a:hover{background:#fff1cd!important;color:#83121b!important;text-shadow:none!important}
.ticker{
  padding:.48rem 0!important;
  background:linear-gradient(#fffdf2,#f4e2b9)!important;
  border-block:2px solid #b78d45!important;
  color:#9a1720!important;
}

/* ---------- Core paper / frame treatment ---------- */
.home-main,main{max-width:1400px!important;padding:15px!important}
.concept-home{background:
  radial-gradient(circle at 50% 0,rgba(255,255,255,.65),transparent 38%),
  linear-gradient(#f4ead0,#eadcb7)}
.storybook-panel,.panel,.window,.card,.ad-slot{
  background:
    linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),
    linear-gradient(135deg,#fffaf0,#f1dfb1)!important;
  border:5px ridge #b98c3f!important;
  box-shadow:5px 6px 0 rgba(84,48,22,.22),0 9px 18px rgba(74,43,20,.13)!important;
}
.storybook-panel:before,.panel:before,.card:before{
  inset:6px!important;
  border:1px dotted rgba(122,76,29,.32)!important;
}
.panel-ribbon{
  background:linear-gradient(#176347,#0a4934)!important;
  border-bottom:4px ridge #c69b49!important;
  color:#fff8dc!important;
  text-shadow:0 2px #062d20!important;
}

/* ---------- Welcome / feature / TV guide row ---------- */
.home-hero-grid{
  grid-template-columns:224px minmax(0,1fr) 286px!important;
  gap:12px!important;
  margin:10px 0 13px!important;
}
.welcome-panel,.featured-panel{padding:5px 13px 14px!important}
.welcome-lead{font-size:1.04rem;line-height:1.38}
.handwritten{color:#4d3728!important;margin:1.1rem .2rem!important;font-size:1.16rem!important}
.welcome-decor{align-items:center!important}
.welcome-decor img{filter:drop-shadow(0 2px 2px #0004)}

.village-feature{
  min-height:545px!important;
  border:6px ridge #b78639!important;
  background-image:url('/assets/generated/home/home-feature-christmas.svg')!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  box-shadow:6px 7px 0 rgba(75,40,18,.23),0 12px 22px rgba(57,34,21,.15)!important;
}
.village-feature:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:url('/assets/generated/decor/holly-corners.svg') center/100% 100% no-repeat;
  pointer-events:none;
}
.village-feature:after{
  background:linear-gradient(90deg,transparent 0 48%,rgba(255,248,227,.18) 68%,rgba(255,248,227,.84) 100%)!important;
}
.village-feature-copy{
  width:min(465px,92%)!important;
  padding:27px 30px!important;
  margin-left:auto!important;
  margin-right:20px!important;
  border:2px solid rgba(185,140,65,.52);
  border-radius:3px;
  background:rgba(255,247,220,.78);
  box-shadow:0 4px 18px rgba(73,45,28,.17);
}
.village-feature h1{color:#a11620!important;font-size:clamp(3rem,5vw,5.2rem)!important}
.village-quote{color:#46372b!important}

.featured-link{
  grid-template-columns:58px 1fr!important;
  gap:.65rem!important;
  padding:.65rem .1rem!important;
  border-bottom:1px dotted #9d7541!important;
}
.external-media-feature{
  width:58px!important;height:58px!important;border:3px ridge #c9a04e!important;object-fit:cover!important;
  box-shadow:2px 3px 0 rgba(80,42,18,.2)
}
.featured-link strong{color:#0c4d36!important;font-size:.96rem!important}
.featured-link small{font-size:.77rem!important;line-height:1.24!important}
.feature-more{padding-top:.4rem;text-align:center}

/* ---------- Eight picture cards ---------- */
.category-showcase{
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:7px!important;
  margin:12px 0!important;
}
.category-tile{
  padding:6px 6px 11px!important;
  background:linear-gradient(#fffaf0,#ecd8a7)!important;
  border:4px ridge #ae8037!important;
  box-shadow:3px 4px 0 rgba(74,40,22,.22)!important;
  overflow:hidden;
}
.tile-picture{
  position:relative;
  display:block!important;
  height:118px!important;
  overflow:hidden;
  margin-bottom:7px!important;
  border:3px ridge #c3994a!important;
  background-image:linear-gradient(rgba(8,42,32,.06),rgba(8,42,32,.18)),url('/assets/generated/home/home-feature-christmas.svg')!important;
  background-size:cover!important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.18);
}
.tile-picture:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(transparent 52%,rgba(6,40,29,.28));
  pointer-events:none;
}
.tile-picture img{
  position:absolute;
  z-index:2;
  right:8px;
  bottom:7px;
  width:58px!important;
  height:58px!important;
  image-rendering:pixelated;
  filter:drop-shadow(0 3px 3px #0008);
}
.tile-scenery{position:absolute;inset:0;background:radial-gradient(circle at 20% 16%,rgba(255,232,149,.35),transparent 28%)}
.tile-stories .tile-picture{background-position:10% 48%!important}
.tile-carols .tile-picture{background-position:24% 50%!important}
.tile-movies .tile-picture{background-position:39% 52%!important}
.tile-tv .tile-picture{background-position:52% 48%!important}
.tile-music .tile-picture{background-position:64% 50%!important}
.tile-gifs .tile-picture{background-position:76% 49%!important}
.tile-traditions .tile-picture{background-position:88% 50%!important}
.tile-recipes .tile-picture{background-position:98% 50%!important}
.category-tile h2{font-size:1rem!important;color:#104b36!important;margin:.35rem 0 .2rem!important}
.category-tile p{font-size:.75rem!important;line-height:1.22!important;min-height:54px!important;margin:.35rem 0 .5rem!important}
.tile-button{font-size:.7rem!important;padding:.42rem .42rem!important}

/* ---------- Three-panel mid section ---------- */
.lower-feature-grid{
  grid-template-columns:252px minmax(0,1fr) 252px!important;
  gap:11px!important;
  margin:13px 0!important;
}
.concept-promo{
  padding:0!important;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:305px;
}
.promo-art{
  min-height:145px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  padding:22px 8px 10px;
  background-image:
    linear-gradient(to bottom,rgba(7,43,33,.08),rgba(7,43,33,.28)),
    url('/assets/generated/home/home-feature-christmas.svg');
  background-size:cover;
  border-bottom:4px ridge #be9344;
}
.promo-art-gifts{background-position:12% 55%}
.promo-art-cocoa{background-position:86% 55%}
.promo-art img{image-rendering:pixelated;filter:drop-shadow(0 4px 4px #0008);margin-inline:-5px}
.promo-copy{padding:10px 12px 13px;text-align:center}
.promo-copy h2{margin:.15rem 0 .45rem!important;font:italic bold 1.17rem Georgia,serif!important;color:#9d1720!important}
.promo-copy p{font-size:.83rem;line-height:1.3}

.quote-panel{
  min-height:305px!important;
  background-image:url('/assets/generated/home/home-feature-christmas.svg')!important;
  background-position:center 56%!important;
  background-size:cover!important;
  padding:22px!important;
  justify-content:flex-end!important;
}
.quote-copy{
  width:min(370px,70%)!important;
  padding:17px!important;
  background:rgba(255,246,219,.9)!important;
  border:4px ridge #c39443!important;
  box-shadow:3px 4px 0 rgba(60,34,18,.22);
}
.quote-copy blockquote{font-size:1.55rem!important;color:#941820!important}
.quote-copy ul{font-size:.86rem!important}

/* ---------- Content grids / real imagery ---------- */
.concept-section{margin-top:14px!important}
.ornament-heading{gap:.85rem!important}
.ornament-heading h2{margin:.2rem 0!important;font-style:italic;color:#901720!important}
.ornament-heading span{color:#b21b26!important;text-shadow:0 1px #fff}
.ornament-heading.small h2{font-size:1.35rem!important}
.section-intro{max-width:780px;margin:.35rem auto 1rem;text-align:center;color:#5b4533}
.christmas-essentials .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.card{overflow:hidden!important;padding:10px!important}
.external-media-thumb{
  width:100%!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  border:3px ridge #bd944a!important;
  margin:0 0 .7rem!important;
  box-shadow:0 3px 8px rgba(0,0,0,.18)
}
.card-badge{width:46px!important;height:46px!important;font-size:22px!important}
.card h3{font-size:1.02rem!important}
.card p{font-size:.84rem;line-height:1.35}
.external-media-source{font-size:10px!important}

.gif-party{
  background:
    linear-gradient(rgba(255,250,232,.9),rgba(241,223,178,.94)),
    url('/assets/generated/home/main-hero-christmas.svg') center/cover!important;
}
.gif-strip{
  padding:1rem!important;
  border:5px ridge #b58b42!important;
  background:
    radial-gradient(circle at 50% 0,rgba(255,215,91,.18),transparent 52%),
    linear-gradient(#0d533a,#072f24)!important;
  box-shadow:inset 0 0 25px #0007,0 4px 0 rgba(70,39,20,.18)!important;
}
.gif-strip img{background:rgba(255,255,255,.04);border-radius:4px;padding:2px}

.ad-slot{
  max-width:840px!important;
  border:4px dashed #b4873d!important;
  background:linear-gradient(#fff8e4,#ecd8a4)!important;
}

.old-web-panel{
  grid-template-columns:2.1fr .9fr!important;
  gap:1.5rem!important;
  background:
    linear-gradient(rgba(255,248,226,.94),rgba(238,218,171,.94)),
    url('/assets/generated/home/home-feature-christmas.svg') center/cover!important;
}
.counter-box{
  border:4px ridge #c79d4d!important;
  background:linear-gradient(#123f31,#071f19)!important;
  box-shadow:inset 0 0 20px #0008;
}
.counter-box img{image-rendering:pixelated;margin-bottom:.2rem}
.counter{border:3px inset #826f52!important;color:#ff4052!important}

/* ---------- Footer becomes a snowy illustrated ending ---------- */
.site-footer{
  min-height:260px!important;
  padding:46px 20px 32px!important;
  background:
    linear-gradient(rgba(4,31,24,.76),rgba(3,24,18,.9)),
    url('/assets/generated/home/main-hero-christmas.svg') center 70%/cover no-repeat!important;
  border-top:7px ridge #cc9f48!important;
  box-shadow:inset 0 18px 25px rgba(0,0,0,.2);
}
.site-footer:before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:42px;
  background:repeating-radial-gradient(circle at 13px 5px,#d41c2a 0 5px,#ffd25d 6px 8px,#0c5c3e 9px 13px,transparent 14px 18px);
  filter:drop-shadow(0 2px 4px #0008);
}
.site-footer:after{height:68px!important;background:linear-gradient(transparent,#fff 94%)!important;opacity:.88!important}
.footer-characters{font-size:42px!important}
.footer-wish{font-size:1.65rem!important;text-shadow:0 2px #05241b}
.site-footer p{max-width:940px;margin:.6rem auto}

/* ---------- Buttons ---------- */
.controls button,.button{
  border:3px outset #f0cb67!important;
  background:linear-gradient(#c71d29,#8d1019)!important;
  color:#fffdf0!important;
  text-shadow:0 1px #4e050b!important;
  box-shadow:2px 3px 0 #532819!important;
}
.controls button:hover,.button:hover{background:linear-gradient(#df2935,#a2131d)!important;color:#fff!important}
.green-button{background:linear-gradient(#1c754d,#0a4e34)!important;color:#fff!important}

/* ---------- Mobile ---------- */
@media(max-width:1180px){
  .category-showcase{grid-template-columns:repeat(4,1fr)!important}
  .home-hero-grid{grid-template-columns:205px minmax(0,1fr)!important}
  .featured-panel{grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:0 18px!important}
  .featured-panel .panel-ribbon,.featured-panel .feature-more{grid-column:1/-1!important}
  .header-gif-tree{left:24px!important}.header-gif-snowman{right:24px!important}
}
@media(max-width:820px){
  .header-sky{min-height:390px!important;background-position:center!important}
  .brand-sign{width:84vw!important}
  .home-hero-grid{grid-template-columns:1fr!important}
  .featured-panel{display:block!important}
  .village-feature{min-height:460px!important}
  .village-feature-copy{width:92%!important;margin:auto!important;background:rgba(255,246,218,.8)!important}
  .category-showcase{grid-template-columns:repeat(2,1fr)!important}
  .lower-feature-grid,.old-web-panel{grid-template-columns:1fr!important}
  .concept-promo{min-height:auto!important}
  .promo-art{min-height:160px!important}
  .quote-panel{min-height:390px!important}
  .quote-copy{width:92%!important}
  .christmas-essentials .card-grid{grid-template-columns:1fr!important}
  .site-footer{min-height:300px!important}
}
@media(max-width:490px){
  .header-sky{min-height:340px!important}
  .brand-sign{width:92vw!important;padding:14px 18px!important}
  .brand-title{font-size:2.75rem!important}
  .category-showcase{grid-template-columns:1fr 1fr!important;gap:6px!important}
  .tile-picture{height:96px!important}
  .tile-picture img{width:48px!important;height:48px!important}
  .category-tile p{min-height:0!important}
  .main-nav a{font-size:.76rem!important;padding:.46rem .5rem!important}
  .quote-copy{width:100%!important}
}