.fea10,
.fea10 * { box-sizing: border-box; }

.fea10 {
  --text:#0a0a0a;
  --muted:#707070;
  --line:rgba(10,10,10,.16);
  --card:#f2f2ef;
  --rail:116px;
  --gap-x:18px;
  --gap-y:18px;
  --compact-w:256px;
  --compact-h:322px;
  --large-w:520px;
  --large-h:610px;
  width:100%;
  margin:0;
  padding:0;
  background:#fff !important;
  color:var(--text) !important;
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif !important;
  font-size:11px;
  line-height:1.2;
}

.fea10 .fea10-btn {
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--text) !important;
  font:inherit !important;
  margin:0 !important;
  padding:0 !important;
  text-decoration:none !important;
  cursor:pointer;
}
.fea10 .fea10-btn::before,
.fea10 .fea10-btn::after { content:none !important; display:none !important; }
.fea10 .fea10-btn:focus-visible,
.fea10 a:focus-visible,
.fea10-canvas:focus-visible { outline:1px solid #111 !important; outline-offset:2px; }

.fea10-layout {
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  min-height:clamp(690px,calc(100svh - 70px),830px);
  width:100%;
  background:#fff;
}

.fea10-rail {
  grid-column:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100%;
  border-right:1px solid var(--line);
  background:#fff;
  padding:16px 0 20px;
}

.fea10-rail__top {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.fea10-category-toggle {
  display:grid !important;
  grid-template-rows:28px 92px;
  justify-items:center;
  align-items:center;
  width:100%;
  min-height:120px;
}
.fea10-category-toggle__icon { display:grid; place-items:center; width:28px; height:28px; }
.fea10-plus-svg { display:block; width:12px; height:12px; stroke:currentColor; stroke-width:1.25; fill:none; }
.fea10-category-toggle__label,
.fea10-year-toggle span,
.fea10-rail__title {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  white-space:nowrap;
}
.fea10-category-toggle__label { font-size:9px; font-weight:600; letter-spacing:.01em; }

.fea10-prev {
  width:40px;
  height:42px;
  display:grid !important;
  place-items:center;
  font-size:16px !important;
  line-height:1 !important;
  margin-top:2px !important;
  transition:opacity .18s ease;
}
.fea10-prev:disabled { opacity:.18; cursor:default; }

.fea10-year-toggle {
  display:grid !important;
  place-items:center;
  width:42px;
  min-height:82px;
  margin-top:2px !important;
}
.fea10-year-toggle span { font-size:9px; font-weight:600; }

.fea10-rail__bottom {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.fea10-rail__line { display:block; width:1px; height:150px; background:#111; margin-bottom:12px; }
.fea10-rail__title { font-size:18px; line-height:1; font-weight:600; letter-spacing:-.02em; margin-bottom:14px; }
.fea10-view-toggle { display:grid !important; place-items:center; width:44px; height:36px; }
.fea10-view-svg { display:block; width:28px; height:22px; overflow:visible; }
.fea10-view-svg rect { stroke:#111 !important; stroke-width:1 !important; vector-effect:non-scaling-stroke; }
.fea10-view-svg__small,
.fea10-view-svg__large { transition:fill .18s ease, opacity .18s ease; }
.fea10[data-view="double"] .fea10-view-svg__small { fill:#111 !important; }
.fea10[data-view="double"] .fea10-view-svg__large { fill:#fff !important; }
.fea10[data-view="single"] .fea10-view-svg__small { fill:#fff !important; opacity:.55; }
.fea10[data-view="single"] .fea10-view-svg__large { fill:#111 !important; }

.fea10-main { grid-column:2; min-width:0; position:relative; background:#fff; }
.fea10-mobile-head { display:none; }

.fea10-stage { position:relative; height:100%; min-height:0; background:#fff; overflow:hidden; }
.fea10-canvas {
  position:absolute;
  inset:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  cursor:grab;
}
.fea10-canvas::-webkit-scrollbar { display:none; }
.fea10-canvas.is-dragging { cursor:grabbing; user-select:none; }
.fea10-matrix {
  display:grid;
  grid-auto-flow:column;
  justify-content:start;
  align-content:start;
  column-gap:var(--gap-x);
  row-gap:var(--gap-y);
  min-width:max-content;
  padding:30px 90px 30px 72px;
  transition:opacity .16s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.fea10[data-view="double"] .fea10-matrix {
  grid-template-rows:repeat(2,var(--compact-h));
  grid-auto-columns:var(--compact-w);
}
.fea10[data-view="single"] .fea10-matrix {
  grid-template-rows:var(--large-h);
  grid-auto-columns:var(--large-w);
}
.fea10.is-switching .fea10-matrix { opacity:.18; transform:translateX(-8px); }

.fea10-card {
  width:100%;
  height:100%;
  background:var(--card) !important;
  overflow:hidden;
  border:0 !important;
  box-shadow:none !important;
}
.fea10-card.is-hidden { display:none !important; }
.fea10-card__link {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  padding:8px 24px 10px 8px;
  color:var(--text) !important;
  text-decoration:none !important;
  background:transparent !important;
}
.fea10-card__media {
  flex:0 0 calc(var(--compact-h) - 98px);
  width:100%;
  min-height:0;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  overflow:hidden;
}
.fea10-card__image {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:left top;
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
}
.fea10-card__placeholder { width:100%; height:100%; background:#e8e8e4; }
.fea10-card__category--desktop {
  position:absolute;
  top:8px;
  right:6px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  max-height:160px;
  overflow:hidden;
  font-size:8px;
  line-height:1;
  font-weight:600;
  white-space:nowrap;
}
.fea10-card__category--mobile { display:none; }
.fea10-card__meta { margin-top:auto; padding-top:9px; }
.fea10-card__meta-row { display:block; }
.fea10-card__date { display:block; font-size:8px; line-height:1; font-weight:600; margin-bottom:8px; }
.fea10-card__title { margin:0 !important; padding:0 !important; font-size:13px !important; line-height:1.08 !important; font-weight:600 !important; letter-spacing:-.015em !important; color:var(--text) !important; }

.fea10[data-view="single"] .fea10-card__link { padding:10px 30px 14px 10px; }
.fea10[data-view="single"] .fea10-card__media { flex-basis:calc(var(--large-h) - 116px); }
.fea10[data-view="single"] .fea10-card__date { font-size:9px; margin-bottom:9px; }
.fea10[data-view="single"] .fea10-card__title { font-size:15px !important; }

.fea10-panel {
  position:absolute;
  z-index:20;
  top:0;
  bottom:0;
  left:0;
  width:min(310px,calc(100vw - var(--rail)));
  padding:24px;
  background:#fff;
  border-right:1px solid var(--line);
  overflow:auto;
}
.fea10-panel[hidden] { display:none !important; }
.fea10-panel__head { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:9px; font-weight:600; }
.fea10-panel__options { display:flex; flex-direction:column; }
.fea10-panel__options .fea10-btn { min-height:42px; width:100%; text-align:left; border-bottom:1px solid rgba(10,10,10,.08) !important; font-size:10px !important; opacity:.45; }
.fea10-panel__options .fea10-btn[aria-pressed="true"],
.fea10-panel__options .fea10-btn:hover { opacity:1; }
.fea10-empty { padding:40px; font-size:10px; }

@media (max-width:1199px) and (min-width:768px) {
  .fea10 { --rail:96px; --compact-w:226px; --compact-h:292px; --large-w:450px; --large-h:560px; }
  .fea10-matrix { padding-left:48px; padding-right:70px; }
  .fea10-rail__line { height:130px; }
  .fea10-rail__title { font-size:16px; }
}

@media (max-width:767px) {
  .fea10 { font-size:10px; }
  .fea10-layout { display:block; min-height:0; }
  .fea10-rail { display:none; }
  .fea10-main { width:100%; }
  .fea10-mobile-head { display:block; padding:18px 12px 0; background:#fff; }
  .fea10-mobile-head__title { font-size:10px; font-weight:600; line-height:1; margin-bottom:12px; }
  .fea10-mobile-head__controls {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 38px;
    align-items:center;
    min-height:44px;
    border-bottom:1px solid var(--line);
  }
  .fea10-mobile-category { display:flex !important; align-items:center; gap:7px; min-height:44px; font-size:9px !important; font-weight:600 !important; white-space:nowrap; overflow:visible !important; }
  .fea10-mobile-category .fea10-plus-svg { width:10px; height:10px; flex:0 0 auto; }
  .fea10-mobile-year { min-width:48px; min-height:44px; display:grid !important; place-items:center; font-size:8px !important; font-weight:600 !important; }
  .fea10-mobile-view { width:38px; height:44px; display:grid !important; place-items:center; }
  .fea10-mobile-view .fea10-view-svg { width:24px; height:19px; }

  .fea10-panel {
    position:static;
    width:auto;
    margin:0 12px;
    padding:12px 0 16px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .fea10-panel__head { min-height:34px; padding-bottom:8px; }
  .fea10-panel__options .fea10-btn { min-height:38px; font-size:9px !important; }

  .fea10-stage { height:auto; min-height:0; overflow:visible; padding:0 12px 28px; }
  .fea10-canvas { position:static; overflow:visible; cursor:default; }
  .fea10-matrix {
    min-width:0;
    width:100%;
    padding:18px 0 0;
    display:grid;
    grid-auto-flow:row;
    grid-auto-columns:auto;
    align-content:initial;
    justify-content:stretch;
    transition:opacity .16s ease, transform .2s ease;
  }
  .fea10[data-view="double"] .fea10-matrix { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; gap:16px 10px; }
  .fea10[data-view="single"] .fea10-matrix { grid-template-columns:1fr; grid-template-rows:none; gap:30px; }
  .fea10.is-switching .fea10-matrix { transform:translateY(5px); }

  .fea10-card { height:auto; min-height:0; background:transparent !important; overflow:visible; }
  .fea10-card__link { height:auto; padding:0; overflow:visible; }
  .fea10-card__media { flex:none; width:86%; height:auto; margin:0 auto; overflow:visible; }
  .fea10-card__image { width:100%; height:auto; object-fit:contain; object-position:center; }
  .fea10-card__placeholder { aspect-ratio:4/5; height:auto; }
  .fea10-card__category--desktop { display:none; }
  .fea10-card__category--mobile { display:block; font-size:7px; line-height:1; font-weight:600; text-align:right; max-width:58%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fea10-card__meta { width:86%; margin:0 auto; padding-top:7px; }
  .fea10-card__meta-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .fea10-card__date { margin:0; font-size:7px; }
  .fea10-card__title { margin-top:6px !important; font-size:10px !important; line-height:1.1 !important; }

  .fea10[data-view="single"] .fea10-card__link { padding:0; }
  .fea10[data-view="single"] .fea10-card__media { width:100%; margin:0; }
  .fea10[data-view="single"] .fea10-card__meta { width:100%; padding-top:9px; }
  .fea10[data-view="single"] .fea10-card__date,
  .fea10[data-view="single"] .fea10-card__category--mobile { font-size:8px; }
  .fea10[data-view="single"] .fea10-card__title { font-size:11px !important; margin-top:7px !important; }
}

@media (max-width:359px) {
  .fea10[data-view="double"] .fea10-matrix { grid-template-columns:1fr; gap:20px; }
  .fea10[data-view="double"] .fea10-card__media,
  .fea10[data-view="double"] .fea10-card__meta { width:76%; }
}

@media (prefers-reduced-motion:reduce) {
  .fea10 *, .fea10 *::before, .fea10 *::after { transition:none !important; scroll-behavior:auto !important; }
}