/* Recommended equipment: full-width RPG header, seamless aged paper, and fixed card language. */
.equipment-panel{
  --eq-navy:#073d6b;
  --eq-deep:#032846;
  --eq-gold:#d9aa42;
  --eq-ink:#174b80;
  --corner-w:48px;
  --corner-h:40px;
  container-type:inline-size;
  position:relative;
  isolation:isolate;
  overflow:visible;
  margin-bottom:18px;
  padding:0;
  border:4px solid #5d360a;
  border-radius:14px;
  clip-path:none;
  background:
    radial-gradient(ellipse at 52% -10%,rgba(255,250,214,.95) 0 20%,transparent 48%),
    radial-gradient(circle at 14% 24%,rgba(111,65,16,.07) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 73%,rgba(111,65,16,.055) 0 1px,transparent 2px),
    linear-gradient(100deg,#d8ae61 0%,#efd28d 3%,#f8e8b6 12%,#f3dda0 52%,#f9e9b9 88%,#d3a553 100%);
  box-shadow:
    0 6px 0 rgba(67,35,5,.30),
    0 10px 15px rgba(52,29,6,.18),
    inset 0 0 0 2px #f2d17a,
    inset 0 0 0 4px #7c4c13,
    inset 0 0 26px rgba(91,50,7,.20);
}
.equipment-panel:before{
  content:"";
  position:absolute;
  z-index:12;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(#fff0a6,#b0751a 55%,#4b2808) center 5px/calc(100% - 2 * var(--corner-w) + 24px) 4px no-repeat,
    linear-gradient(#fff0a6,#b0751a 55%,#4b2808) center calc(100% - 5px)/calc(100% - 2 * var(--corner-w) + 24px) 4px no-repeat,
    linear-gradient(90deg,#fff0a6,#b0751a 55%,#4b2808) 5px center/4px calc(100% - 2 * var(--corner-h) + 24px) no-repeat,
    linear-gradient(90deg,#fff0a6,#b0751a 55%,#4b2808) calc(100% - 5px) center/4px calc(100% - 2 * var(--corner-h) + 24px) no-repeat;
}
.equipment-panel__corner{
  position:absolute;
  z-index:13;
  width:var(--corner-w);
  height:var(--corner-h);
  pointer-events:none;
  background:url("../images/equipment-corner-tr.png") center/100% 100% no-repeat;
}
.equipment-panel__corner--tl{top:0;left:0;transform:scaleX(-1)}
.equipment-panel__corner--tr{top:0;right:0}
.equipment-panel__corner--bl{
  bottom:0;left:0;transform:rotate(180deg);
  border-radius:0 14px 0 0;
  -webkit-mask-image:radial-gradient(ellipse at right top,#000 0 51%,transparent 82%);
  mask-image:radial-gradient(ellipse at right top,#000 0 51%,transparent 82%);
}
.equipment-panel__corner--br{
  bottom:0;right:0;transform:scaleY(-1);
  border-radius:0 14px 0 0;
  -webkit-mask-image:radial-gradient(ellipse at right top,#000 0 51%,transparent 82%);
  mask-image:radial-gradient(ellipse at right top,#000 0 51%,transparent 82%);
}
.equipment-panel:after{
  content:"";
  position:absolute;
  z-index:11;
  inset:5px;
  pointer-events:none;
  border:1px solid rgba(255,231,151,.88);
  border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(103,62,14,.55);
}

.equipment-heading{
  position:relative;
  z-index:3;
  width:100%;
  min-height:112px;
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  grid-template-rows:66px auto;
  align-items:center;
  margin:0;
  padding:4px 12px 0;
  color:#fff4ce;
  border:4px solid #a46b1d;
  border-radius:8px 8px 0 0;
  outline:0;
  background:
    radial-gradient(circle at 50% 0,rgba(71,146,199,.16),transparent 42%),
    linear-gradient(180deg,#073e6d 0%,#06345e 55%,#022643 100%);
  box-shadow:inset 0 0 0 2px #e7c061,inset 0 0 0 4px #164f7a,inset 0 0 15px rgba(0,0,0,.42),0 3px 4px rgba(49,25,4,.32);
}
.equipment-heading:before,.equipment-heading:after{content:none}
.equipment-heading__icon{position:relative;align-self:stretch;grid-column:1;grid-row:1;z-index:4}
.equipment-heading__icon img{
  position:absolute;
  left:-2px;
  top:50%;
  width:72px;
  height:70px;
  object-fit:contain;
  transform:translateY(-51%) rotate(-2deg);
  filter:drop-shadow(0 4px 2px rgba(22,12,2,.56));
}
.equipment-heading h2{
  position:relative;
  z-index:4;
  grid-column:2;
  grid-row:1;
  margin:0;
  padding:0 10px 1px 2px;
  color:#fff2bd;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(20px,1.65vw,24px);
  font-weight:900;
  line-height:1.18;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-shadow:0 3px 0 #351900,2px 0 0 #351900,-2px 0 0 #351900,0 -1px 0 #351900;
}
.equipment-heading h2 span{display:inline}
.equipment-heading p{
  position:relative;
  z-index:4;
  grid-column:1/-1;
  grid-row:2;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 -12px;
  padding:6px 15px 7px;
  color:#f9efd4;
  border-top:2px solid #d6a743;
  background:linear-gradient(180deg,#06375e,#032846);
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:11.5px;
  font-weight:800;
  line-height:1.5;
  text-align:center;
  text-shadow:0 2px 0 rgba(0,0,0,.52);
}

.equipment-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:10px;
  margin:0;
  padding:24px 20px;
  border:0;
  background:transparent;
  box-shadow:none;
}
.equipment-grid:before,.equipment-grid:after{content:none}

.equipment-grid .product{
  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:100%;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  padding:7px 8px 12px;
  overflow:visible;
  border:12px solid transparent;
  border-image-source:url("../images/equipment-card-frame.svg");
  border-image-slice:40;
  border-image-width:12px;
  border-image-outset:0;
  border-image-repeat:stretch;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.equipment-grid .product:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 69% 70% at 50% 53%,
    rgba(255,253,236,.96) 0%,
    rgba(255,249,224,.76) 54%,
    rgba(255,245,210,.28) 77%,
    transparent 100%);
}
.equipment-grid .product:after{content:none}
.equipment-grid .product>img,
.equipment-grid .product>h3,
.equipment-grid .product>p,
.equipment-grid .product>.product-actions{position:relative;z-index:2}
.equipment-grid .product>img{
  width:100%;
  height:auto;
  aspect-ratio:1.42/1;
  display:block;
  object-fit:cover;
  border:0;
  border-radius:3px;
  background:#e7dfcb;
  box-shadow:0 0 0 2px #986622,0 0 0 3px #f7df9c;
}
.equipment-grid .product:nth-child(1)>img{object-position:10% center}
.equipment-grid .product:nth-child(2)>img{object-position:32% center}
.equipment-grid .product:nth-child(3)>img{object-position:88% center}
.equipment-grid .product:nth-child(4)>img{object-position:center}
.equipment-grid .product:nth-child(5)>img{object-position:center}
.equipment-grid .product:nth-child(6)>img{object-position:center}
.equipment-grid .badge{
  position:absolute;
  z-index:8;
  top:24px;
  left:24px;
  padding:4px 9px 5px;
  color:#fff8e6;
  border:1px solid rgba(56,24,7,.45);
  border-radius:4px 4px 4px 1px;
  background:linear-gradient(#df3c53,#a90f2e);
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 2px 2px rgba(48,24,4,.24);
  font-size:10px;
  font-weight:900;
  line-height:1.2;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.equipment-grid .badge--green{background:linear-gradient(#269b55,#0f6535)}
.equipment-grid .badge--blue{background:linear-gradient(#2588b6,#075b88)}
.equipment-grid .product h3{
  margin:10px 1px 4px;
  color:var(--eq-ink);
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:15px;
  font-weight:900;
  line-height:1.32;
  letter-spacing:-.02em;
  text-shadow:0 1px 0 #fff;
}
.equipment-grid .product p{
  margin:0 1px 10px;
  color:#4e493d;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:11.5px;
  font-weight:700;
  line-height:1.52;
}
.equipment-grid .product-actions{
  position:relative;
  z-index:8;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:2px;
}
.equipment-grid .product-actions a{
  min-width:0;
  padding:8px 3px 7px;
  color:#fff8ea;
  border:1px solid #7c1c0e;
  border-radius:5px;
  background:linear-gradient(#e84d39,#b62017);
  box-shadow:inset 0 1px rgba(255,255,255,.38),0 2px 0 #7b260f;
  text-align:center;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:10px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.equipment-grid .product-actions a:last-child{
  color:#4c3515;
  border-color:#9d7025;
  background:linear-gradient(#ffe5a2,#e9bc59);
  box-shadow:inset 0 1px rgba(255,255,255,.65),0 2px 0 #a06d22;
  text-shadow:0 1px 0 #fff3c8;
}
.equipment-grid .product-actions a:hover{filter:brightness(1.08) saturate(1.05)}
.equipment-grid .product-actions a:focus-visible{outline:3px solid #fff0a2;outline-offset:2px}

@container (min-width:640px){
  .equipment-heading{
    min-height:82px;
    grid-template-columns:64px minmax(245px,43%) minmax(0,1fr);
    grid-template-rows:1fr;
    padding:5px 12px;
  }
  .equipment-heading__icon img{width:68px;height:67px}
  .equipment-heading h2{grid-column:2;grid-row:1;font-size:21px;padding-left:3px}
  .equipment-heading p{
    grid-column:3;
    grid-row:1;
    justify-content:flex-start;
    margin:4px 0 4px 7px;
    padding:4px 5px 4px 13px;
    border-top:0;
    border-left:1px solid rgba(232,192,93,.7);
    background:none;
    font-size:10.5px;
    text-align:left;
  }
}

@container (max-width:580px){
  .equipment-panel{--corner-w:44px;--corner-h:37px}
  .equipment-heading{
    min-height:114px;
    grid-template-columns:72px minmax(0,1fr);
    grid-template-rows:64px auto;
    padding:4px 9px 0;
  }
  .equipment-heading__icon{grid-column:1;grid-row:1}
  .equipment-heading__icon img{left:-2px;width:64px;height:62px}
  .equipment-heading h2{
    grid-column:2;
    grid-row:1;
    padding:0 5px;
    font-size:clamp(18px,5.3cqw,22px);
    line-height:1.18;
    white-space:normal;
    text-wrap:balance;
  }
  .equipment-heading p{
    grid-column:1/-1;
    grid-row:2;
    min-height:0;
    margin:0 -9px;
    padding:6px 12px 7px;
    justify-content:center;
    border-top:2px solid rgba(225,183,75,.78);
    font-size:10.5px;
    line-height:1.42;
    text-align:center;
  }
  .equipment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:24px 18px}
  .equipment-grid .product h3{font-size:14px}
  .equipment-grid .product p{font-size:11px}
  .equipment-grid .badge{top:23px;left:23px}
}
@container (max-width:360px){
  .equipment-panel{--corner-w:42px;--corner-h:35px}
  .equipment-heading{grid-template-columns:64px minmax(0,1fr);min-height:110px}
  .equipment-heading__icon img{width:58px;height:56px}
  .equipment-heading h2{font-size:17px}
  .equipment-heading h2 span{display:block}
  .equipment-grid{grid-template-columns:1fr;gap:12px;padding:24px 18px}
  .equipment-grid .product h3{font-size:15px}
  .equipment-grid .product p{font-size:11.5px}
  .equipment-grid .badge{top:24px;left:24px}
}

/* Popular articles and rankings share a compact parchment-and-brass system. */
.center{container-type:inline-size;container-name:main-column}
.center .lower-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 0 14px;align-items:stretch}
.center .lower-grid .feature-panel{
  container:feature-box / inline-size;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
  padding:7px;
  overflow:visible;
  clip-path:none;
  border:1px solid #56300f;
  border-radius:10px;
  background:
    linear-gradient(90deg,rgba(59,29,5,.22),transparent 6% 94%,rgba(59,29,5,.25)),
    linear-gradient(125deg,#e2b35d,#986023 30%,#ce9b46 65%,#754315);
  box-shadow:inset 0 1px 0 #fff1b7,inset 0 -1px 0 #422108,0 3px 2px #603c2366,0 6px 10px #3f260b33;
}
.center .lower-grid .feature-panel:before{
  content:"";position:absolute;z-index:5;inset:3px;pointer-events:none;
  border:2px solid #d4a147;border-radius:7px;
  background:none;box-shadow:0 0 0 1px #4f2d10,inset 0 0 0 1px #fff0aa,inset 0 0 0 2px #714314;
}
.center .lower-grid .feature-panel:after{content:none}
.feature-panel__corner{position:absolute;z-index:8;width:40px;height:40px;pointer-events:none;background:url("../images/feature-corner-v2.png") center/contain no-repeat}
.feature-panel__corner--tl{top:-2px;left:-2px}
.feature-panel__corner--tr{top:-2px;right:-2px;transform:scaleX(-1)}
.feature-panel__corner--bl{bottom:-2px;left:-2px;transform:scaleY(-1)}
.feature-panel__corner--br{bottom:-2px;right:-2px;transform:scale(-1)}
.feature-panel__heading{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  min-height:58px;
  margin:0;
  padding:1px 12px 2px 3px;
  border:0;
  border-bottom:1px solid #654013;
  border-radius:3px 3px 0 0;
  background:
    linear-gradient(90deg,#042b49e0,transparent 58%),
    linear-gradient(180deg,#ffda7b26,transparent 30%,#2e16073b),
    url("../images/feature-heading-wood-v1.png") center/cover no-repeat;
  box-shadow:inset 0 1px #f4cf7a,inset 0 -2px #ca9745;
}
.feature-panel__heading:before,.feature-panel__heading:after{content:none}
.feature-panel__crest{position:relative;z-index:6;display:block;width:54px;height:61px;margin:-6px 0 -5px -3px;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 2px 1px #20110480)}
.feature-panel__crest--chest{background-image:url("../images/feature-helmet-v2.png")}
.feature-panel__crest--crown{background-image:url("../images/feature-crest-v2.png")}
.feature-panel__heading h2{margin:0 0 0 4px;color:#fff4d8;font:900 clamp(18px,4.8cqw,25px)/1.2 "Yu Mincho","Hiragino Mincho ProN",serif;white-space:nowrap;text-shadow:0 2px 1px #100f0e,1px 0 #302210,-.3px 0 #fff3d0}
.feature-panel__heading>a{align-self:center;margin-left:5px;padding:4px 0 3px;color:#fff5dd;font:900 clamp(10px,2.6cqw,13px)/1.2 "Yu Mincho","Hiragino Mincho ProN",serif;text-decoration:none;white-space:nowrap;text-shadow:0 2px #38200f;border-top:1px solid #f9e5b98c;border-bottom:1px solid #f9e5b98c;box-shadow:0 1px #49290f}
.feature-panel__heading>a span{padding-left:2px;font-size:15px}
.feature-panel__heading>a:hover{color:#ffe181}
.feature-panel__tabs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0;padding:6px 6px 0;background:linear-gradient(#eedbb4,#f8ecd1)}
.feature-panel__tabs :is(button,a){
  min-width:0;min-height:33px;padding:4px 1px;
  border:1px solid #c6a572;border-bottom-color:#ad8850;border-radius:7px 7px 0 0;
  background:linear-gradient(110deg,#f8edceaa,#fff6e499),url("../images/quest-parchment-v2.png") center/400% auto;
  box-shadow:inset 0 1px #fffdf0,inset 1px 0 #fff9e9;
  color:#58482e;font:800 clamp(10px,2.5cqw,12px)/1.3 "Yu Mincho","Hiragino Mincho ProN",serif;
  cursor:pointer;
}
.feature-panel__tabs :is(button,a).is-active{color:#193e62;background:linear-gradient(#fff9e7,#fff6e1);border-bottom-color:#fff6e1;box-shadow:inset 0 2px #fffdf1}
.feature-panel__tabs :is(button,a):focus-visible{outline:2px solid #126395;outline-offset:1px}
.feature-panel__list{
  flex:1;
  display:flex;
  flex-direction:column;
  margin:0;
  padding:9px 10px 12px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#fff7e840,#fff9e4b3 12%,#fff9e4b3 88%,#fff7e840),url("../images/quest-parchment-v2.png") center/100% 100% no-repeat;
  box-shadow:inset 0 0 10px #935a1b38;
}
.feature-row{
  position:relative;
  flex:1;
  display:grid;
  grid-template-columns:34px 55px minmax(0,1fr) 10px;
  align-items:center;
  gap:5px;
  min-width:0;min-height:61px;
  padding:6px 1px;
  border-bottom:0;
  color:#174374;text-decoration:none;
}
.feature-row:not(:last-child):after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#af8c4f59 8%,#c3a46c66 93%,transparent);box-shadow:0 1px #fffdf18c;mask-image:repeating-linear-gradient(90deg,#000 0 2px,#0008 2px 3px)}
.feature-panel:first-child .feature-row{min-height:68px}
.feature-row:focus-visible{outline:2px solid #126395;outline-offset:1px}
.feature-row__rank{position:relative;display:grid;place-items:center;justify-self:center;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#e4c998,#c9a373);box-shadow:inset 0 1px #f4dfb4,inset 0 -1px #ac815047;color:#593912;font:900 14px/1 Georgia,serif;text-shadow:0 1px #f6e0b7}
.feature-row__rank--1,.feature-row__rank--2,.feature-row__rank--3{isolation:isolate;width:35px;height:35px;padding-top:10px;color:#4b2c0a;background:none;box-shadow:none;font:900 13px/1 Georgia,serif;text-shadow:0 1px #fff2af,-.5px 0 #53350f}
.feature-row__rank--1:before,.feature-row__rank--2:before,.feature-row__rank--3:before{content:"";position:absolute;z-index:-1;inset:0;background:url("../images/feature-crown-v2.png") center/contain no-repeat}
.feature-row__rank--2:before{filter:grayscale(1) brightness(1.08)}
.feature-row__rank--3:before{filter:sepia(.6) saturate(1.5) hue-rotate(335deg) brightness(.83)}
.feature-row img{display:block;width:55px;height:44px;object-fit:cover;border:1px solid #c9b387;border-radius:4px;background:#ecd9b0;box-shadow:0 1px #fffdf2}
.feature-row__thumb{display:block;width:55px;height:44px;border:1px solid #c9b387;border-radius:4px;background-image:url("../images/popular-article-thumbnails-v1.png");background-size:300% 200%;background-repeat:no-repeat;background-color:#ecd9b0;box-shadow:0 1px #fffdf2}
.feature-row__thumb--1{background-position:0 0}.feature-row__thumb--2{background-position:50% 0}.feature-row__thumb--3{background-position:100% 0}.feature-row__thumb--4{background-position:0 100%}.feature-row__thumb--5{background-position:50% 100%}
.feature-row__copy{display:block;min-width:0;color:#153e6b;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;line-height:1.45;text-shadow:.15px 0 currentColor}
.feature-row__copy strong{display:block;font-size:11.5px;font-weight:900}
.feature-row__copy small{display:block;font-size:10.5px;font-weight:800}
.feature-row__arrow{color:#845521;font:900 23px/1 Georgia,serif;text-shadow:0 1px #fff4d0}
@container main-column (max-width:700px){
  .center .lower-grid{grid-template-columns:1fr}
}
@container feature-box (min-width:480px){
  .feature-panel__heading{grid-template-columns:60px minmax(0,1fr) auto;min-height:62px}
  .feature-panel__crest{width:63px;height:68px}
  .feature-panel__list{padding:10px 14px 13px}
  .feature-row{grid-template-columns:40px 78px minmax(0,1fr) 15px;gap:10px;min-height:65px}
  .feature-row img,.feature-row__thumb{width:78px;height:51px}
  .feature-row__copy strong{font-size:14px}
  .feature-row__copy small{font-size:13px}
  .feature-row__rank--1,.feature-row__rank--2,.feature-row__rank--3{width:39px;height:39px;font-size:14px}
}
@container feature-box (max-width:320px){
  .feature-panel__heading{grid-template-columns:42px minmax(0,1fr) auto;padding-right:6px}
  .feature-panel__crest{width:47px;height:54px}
  .feature-panel__heading h2{font-size:17px}
  .feature-panel__heading>a{font-size:9px}
  .feature-panel__list{padding-inline:7px}
  .feature-row{grid-template-columns:29px 48px minmax(0,1fr) 8px;gap:4px}
  .feature-row img,.feature-row__thumb{width:48px;height:41px}
  .feature-row__rank--1,.feature-row__rank--2,.feature-row__rank--3{width:30px;height:32px}
}
/* Reserve five slots regardless of the selected ranking category. */
.feature-panel__list{
  display:grid;
  grid-template-rows:repeat(5,104px);
  grid-auto-rows:104px;
  align-content:start;
}
.feature-panel__list .feature-row{min-height:0;height:100%;align-self:start}
@container feature-box (min-width:480px){
  .feature-panel__list{grid-template-rows:repeat(5,88px);grid-auto-rows:88px}
}
/* Popular articles fill their five equal slots, including the height saved by having no tabs. */
#articles .feature-panel__list{grid-template-rows:repeat(5,minmax(104px,1fr))}
@container feature-box (min-width:480px){
  #articles .feature-panel__list{grid-template-rows:repeat(5,minmax(88px,1fr))}
}
/* Match the toolbar and all five article slots across the paired panels. */
.feature-panel__intro{
  display:flex;align-items:center;justify-content:center;
  padding:10px 12px;
  color:#73552d;font:500 14px/1.6 var(--reading-font);
  background:linear-gradient(#eedbb4,#f8ecd1);
  box-shadow:inset 0 -1px #b89a6555;
}
#articles .feature-panel__list{grid-template-rows:repeat(5,104px)}
@container feature-box (min-width:480px){
  #articles .feature-panel__list{grid-template-rows:repeat(5,88px)}
}
@container main-column (min-width:701px){
  .center .lower-grid{grid-template-rows:auto auto auto}
  .center .lower-grid .feature-panel{
    display:grid;grid-template-rows:subgrid;grid-row:span 3;
  }
  .feature-panel__heading{grid-row:1}
  .feature-panel__intro,.feature-panel__tabs{grid-row:2}
  .feature-panel__list{grid-row:3}
}
@container main-column (min-width:701px){
  .center .lower-grid{row-gap:0}
  .center .lower-grid .feature-panel{row-gap:0}
}
@container main-column (min-width:701px){
  .center .lower-grid{grid-template-rows:auto}
  .center .lower-grid .feature-panel{grid-row:auto;grid-template-rows:64px 62px auto}
}
/* One continuous parchment sheet beneath the heading, shared by toolbar and list. */
.center .lower-grid .feature-panel::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:65px 7px 7px;
  border-radius:0 0 3px 3px;
  pointer-events:none;
  background:linear-gradient(90deg,#fff7e840,#fff9e4b3 12%,#fff9e4b3 88%,#fff7e840),url("../images/quest-parchment-v2.png") center/100% 100% no-repeat;
  box-shadow:inset 0 0 10px #935a1b38;
}
.feature-panel__intro,.feature-panel__tabs,.feature-panel__list{background:transparent;box-shadow:none}
@container main-column (min-width:701px){
  .center .lower-grid .feature-panel::after{top:71px}
}
@container feature-box (min-width:480px){
  .center .lower-grid .feature-panel::after{top:69px}
}
/* Printed ornaments and paper tabs share the continuous parchment below. */
.feature-panel__intro{
  position:relative;min-height:62px;padding:0 18px;gap:12px;
  color:#62421f;font:700 15px/1.5 var(--reading-font);
  text-align:center;text-shadow:0 1px #fff7df;
}
.feature-panel__intro::before,.feature-panel__intro::after{
  content:"";flex:1;max-width:42px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath d='M1 7h29m-7 0 5-4 5 4-5 4-5-4m10 0h7' fill='none' stroke='%23ac803c' stroke-width='1'/%3E%3Ccircle cx='41' cy='7' r='1.5' fill='%23ac803c'/%3E%3C/svg%3E") center/contain no-repeat;
}
.feature-panel__intro::after{transform:scaleX(-1)}
#ranking .feature-panel__tabs{min-height:62px;padding:6px 8px 0;gap:3px;align-items:stretch}
#ranking .feature-panel__tabs :is(button,a){
  position:relative;isolation:isolate;display:grid;place-items:center;
  padding:5px 2px 11px;border:0;border-radius:7px 7px 0 0;
  background:transparent;box-shadow:none;color:#6c5534;
  font-size:clamp(12px,4cqw,15px);line-height:1.4;
  text-shadow:0 1px #fff8e1;
  transition:color .4s ease;
}
#ranking .feature-panel__tabs :is(button,a)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border:1px solid #ac85484d;border-bottom:0;border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,#bf97552b,#b48a3512 65%,transparent);
  mask-image:linear-gradient(#000 0%,#000 48%,transparent 100%);
  opacity:.65;transition:opacity .4s ease;
}
#ranking .feature-panel__tabs :is(button,a)::after{
  content:"";position:absolute;bottom:6px;left:18%;right:18%;height:2px;
  background:linear-gradient(90deg,transparent,#ac7c30 25%,#edcb7b 50%,#ac7c30 75%,transparent);
  opacity:0;transition:opacity .4s ease;
}
#ranking .feature-panel__tabs :is(button,a).is-active{color:#174b70;background:transparent;box-shadow:none}
#ranking .feature-panel__tabs :is(button,a).is-active::before{opacity:.25}
#ranking .feature-panel__tabs :is(button,a).is-active::after{opacity:1}
@media(hover:hover) and (pointer:fine){
  #ranking .feature-panel__tabs :is(button,a):hover:not(.is-active){color:#174b70;box-shadow:none}
  #ranking .feature-panel__tabs :is(button,a):hover:not(.is-active)::before{opacity:1}
}
#ranking .feature-panel__tabs :is(button,a):active:not(.is-active){box-shadow:none}
@media(prefers-reduced-motion:reduce){
  #ranking .feature-panel__tabs :is(button,a),#ranking .feature-panel__tabs :is(button,a)::before,#ranking .feature-panel__tabs :is(button,a)::after{transition:none}
}
/* A clearer selected-category marker, still in antique gold. */
#ranking .feature-panel__tabs :is(button,a)::after{
  height:3px;left:12%;right:12%;bottom:5px;
  background:linear-gradient(90deg,transparent,#9a661e 15%,#c49339 50%,#9a661e 85%,transparent);
  box-shadow:0 1px 0 #fff4c280;
}
#ranking .feature-panel__tabs :is(button,a)>span{white-space:nowrap;text-align:center}
/* Small oak signs with worn iron corner straps and inset lettering. */
.feature-panel .feature-panel__heading>a{
  position:relative;display:flex;align-items:center;justify-content:center;gap:5px;
  width:112px;min-height:44px;margin-left:4px;padding:8px 10px;
  border:0;border-radius:6px;
  background:url("../images/more-sign-frame.svg") center/100% 100% no-repeat,
    linear-gradient(180deg,#27170bc2,#422711a6 45%,#1b1009d1),
    url("../images/feature-heading-wood-v1.png") center/cover no-repeat;
  box-shadow:0 2px 3px #160e0899,inset 0 0 8px #100a0780;
  color:#fff2d5;font-size:14px;line-height:1.3;font-weight:700;
  white-space:nowrap;text-shadow:0 2px 1px #160d08;
  transition:filter .45s ease,box-shadow .45s ease,color .45s ease;
}
.feature-panel .feature-panel__heading>a span{font-size:15px;padding-left:0}
@media(hover:hover) and (pointer:fine){
  .feature-panel .feature-panel__heading>a:hover{
    color:#fff8e6;filter:brightness(1.18);
    box-shadow:0 2px 3px #160e0899,inset 0 0 8px #d8b67730;
  }
}
@container feature-box (max-width:340px){
  .feature-panel .feature-panel__heading>a{width:100px;font-size:13px;gap:3px;padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){.feature-panel .feature-panel__heading>a{transition:none}}