/* Base */

.home-mosaic-row{
  display:block;
  margin:0;
}

.home-panel{
  min-width:0;
  margin-bottom: var(--space-4);
}

.home-panel__box{
  padding: var(--space-3);
  border-style: dashed;
}
.home-panel__head .section-header{ margin: 0 0 var(--space-2); }
.home-panel__head .section-subtitle{ opacity: .9; }
.home-panel__body{ min-width:0; }
.home-panel .grid,
.home-panel .card-grid,
.home-panel .icd-inner-grid{ min-width:0; }
.home-panel .icd-hscroll{ -webkit-overflow-scrolling: touch; }
.home-panel--e .home-panel__box,
.home-panel--h .home-panel__box{ padding: var(--space-4); }

/* Desktop */

@media (min-width: 960px){
  .home-mosaic-row{
    display:grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-3);
    align-items:start;
  }

  .home-mosaic-row--type1{
    grid-template-areas:
      "a a a a a a a b b b b b"
      "a a a a a a a c c c c c"
      "d d d d d d d d d d d d";
    grid-template-rows: auto auto;
    align-items: stretch;
  }
  .home-mosaic-row--type1 .home-panel--a{ grid-area:a; }
  .home-mosaic-row--type1 .home-panel--b{ grid-area:b; }
  .home-mosaic-row--type1 .home-panel--c{ grid-area:c; }
  .home-mosaic-row--type1 .home-panel--d{ grid-area:d; }
  .home-mosaic-row--type1 .home-panel--a,
  .home-mosaic-row--type1 .home-panel--c{ height:100%; }
  .home-mosaic-row--type1 .home-panel--b{ height:auto; }
  .home-mosaic-row--type1 .home-panel--a .home-panel__box,
  .home-mosaic-row--type1 .home-panel--c .home-panel__box{
    height:100%;
    display:flex;
    flex-direction:column;
  }
  .home-mosaic-row--type1 .home-panel__body{ flex:1; min-height:0; }

  .home-mosaic-row--type2{
    grid-template-areas:
      "e e e f f f f f f f f f"
      "e e e g g g g g h h h h";
    align-items: stretch;
  }
  .home-mosaic-row--type2 .home-panel--e{ grid-area:e; }
  .home-mosaic-row--type2 .home-panel--f{ grid-area:f; }
  .home-mosaic-row--type2 .home-panel--g{ grid-area:g; }
  .home-mosaic-row--type2 .home-panel--h{ grid-area:h; }

  .home-mosaic-row--type2 .home-panel{ height: 100%; }
  .home-mosaic-row--type2 .home-panel__box{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .home-mosaic-row--type2 .home-panel__body{
    flex: 1;
    min-height: 0;
    padding-bottom: var(--space-3);
  }

  .home-panel__box{ padding: var(--space-4); }
  .home-panel{ margin-bottom:0; }
}
.home-panel:not(.home-panel--e):not(.home-panel--h) .card{
  padding: var(--space-3) var(--space-3);
}
.home-panel:not(.home-panel--e):not(.home-panel--h) .card .card-supporting-text{
  padding: 0;
}

@media (min-width: 960px) and (max-width: 1200px){
  .home-panel__box{ padding: var(--space-3); }
  .home-panel:not(.home-panel--e):not(.home-panel--h) .card{ padding: var(--space-2) var(--space-3); }
  .home-panel .card .card-title{ line-height: 1.15; }
}

/* Layout A */

.icd-a-grid{
  display:grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  grid-template-areas:
    "hero"
    "rail"
    "under"
    "bottom";
}
.icd-a-grid > *{ min-width:0; min-height:0; }

.icd-a-hero{ grid-area: hero; min-width:0; }
.icd-a-railwrap{ grid-area: rail; min-width:0; }
.icd-a-underwrap{ grid-area: under; min-width:0; }
.icd-a-bottomwrap{ grid-area: bottom; min-width:0; }

.icd-a-railwrap,
.icd-a-underwrap,
.icd-a-bottomwrap{
  display:grid;
  gap: var(--space-2);
  align-content: stretch;
}

.icd-a-railwrap{ grid-template-columns: 1fr; }
.icd-a-underwrap{ grid-template-columns: 1fr; }
.icd-a-bottomwrap{ grid-template-columns: 1fr; }

.icd-a-hero .card,
.icd-a-railwrap a.card-link .card,
.icd-a-underwrap a.card-link .card,
.icd-a-bottomwrap a.card-link .card{
  height:100%;
  display:flex;
  flex-direction:column;
}

@media (min-width: 960px){
  .icd-a-grid{
    grid-template-columns: repeat(12, minmax(0,1fr));
    grid-template-areas:
      "hero hero hero hero hero hero hero rail rail rail rail rail"
      "hero hero hero hero hero hero hero rail rail rail rail rail"
      "hero hero hero hero hero hero hero rail rail rail rail rail"
      "under under under under under under under rail rail rail rail rail"
      "under under under under under under under rail rail rail rail rail"
      "bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom";
    grid-template-rows: auto auto auto;
    align-items: stretch;
  }

  .icd-a-railwrap{
    grid-template-columns: 1fr;
    grid-template-rows: 1.55fr 1fr;
  }
  .icd-a-railwrap a.card-link{ height:100%; }

  .icd-a-underwrap{
    display:grid;
    gap: var(--space-2);
    grid-template-columns: repeat(12, minmax(0,1fr));
    grid-auto-rows: 92px;
    grid-template-areas:
      "u1 u1 u1 u1 u1 u1 u2 u2 u2 u2 u2 u2"
      "u1 u1 u1 u1 u1 u1 u2 u2 u2 u2 u2 u2"
      "u3 u3 u3 u3 u3 u3 u3 u4 u4 u4 u4 u4"
      "u3 u3 u3 u3 u3 u3 u3 u4 u4 u4 u4 u4";
    align-items: stretch;
  }

  .icd-a-underwrap a.card-link:nth-child(1){ grid-area: u1; height:100%; }
  .icd-a-underwrap a.card-link:nth-child(2){ grid-area: u2; height:100%; }
  .icd-a-underwrap a.card-link:nth-child(3){ grid-area: u3; height:100%; }
  .icd-a-underwrap a.card-link:nth-child(4){ grid-area: u4; height:100%; }

  .home-panel--a .icd-a-bottomwrap a.card-link{
    min-height: 190px;
  }
  .home-panel--a .icd-a-bottomwrap a.card-link .card{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.home-panel--a .icd-a-railwrap a.card-link:nth-child(1) .card{ transform: rotate(-1.25deg); }
.home-panel--a .icd-a-railwrap a.card-link:nth-child(2) .card{ transform: rotate( 1.15deg); }
.home-panel--a .icd-a-underwrap a.card-link:nth-child(1) .card{ transform: rotate(-2deg); }
.home-panel--a .icd-a-underwrap a.card-link:nth-child(2) .card{ transform: rotate( 1.6deg); }
.home-panel--a .icd-a-underwrap a.card-link:nth-child(3) .card{ transform: rotate( 1.1deg); }
.home-panel--a .icd-a-underwrap a.card-link:nth-child(4) .card{ transform: rotate(-0.9deg); }
.home-panel--a .icd-a-bottomwrap a.card-link:nth-child(1) .card{ transform: rotate( 0.8deg); }

.home-panel--a .icd-a-grid a.card-link .card{ transform-origin: 50% 40%; }
.home-panel--a .icd-a-grid a.card-link .card{ border-radius: 18px; }

/* Layout B */

.icd-marquee{
  overflow:hidden;
  padding-bottom: var(--space-1);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.icd-marquee__track{
  display:flex;
  gap: var(--space-3);
  width: max-content;
  animation: none;
  transform: translateX(0);
  will-change: transform;
  position: relative;
  z-index: 0;
}
.icd-marquee__item{ min-width: min(82vw, 360px); }
.home-panel--b .icd-marquee__item{ min-height: 240px; }
.home-panel--b .card{ height:100%; display:flex; flex-direction:column; }
.home-panel--b .card .card-supporting-text{ margin-top:auto; }
@media (min-width: 960px){
  .home-panel--b .icd-marquee__item{ min-height: 300px; }
}
@media (prefers-reduced-motion: reduce){
  .icd-marquee__track{ animation: none; }
}
.home-panel--b .icd-marquee{
  position: relative;
  overflow: visible;
  mask-image: none;
}
.home-panel--b .icd-marquee__viewport{
  overflow: hidden;
  border-radius: inherit;
}
.home-panel--b .icd-marquee__track{
  width: 100%;
  gap: 0;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.home-panel--b .icd-marquee__item{
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
}
.home-panel--b .icd-marquee__controls{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.home-panel--b .icd-marquee__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  aspect-ratio: 1 / 1;
  pointer-events: auto;
}
.home-panel--b .icd-marquee__btn[data-action="prev"]{
  left: calc(var(--space-3) * -1);
}
.home-panel--b .icd-marquee__btn[data-action="next"]{
  right: calc(var(--space-3) * -1);
}
.home-panel--b .icd-marquee__btn .material-symbols-outlined{
  font-size: 22px;
  line-height: 1;
}

/* Layout C */

.icd-layout-c-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: var(--space-2);
}
.icd-layout-c-card{
  border-left-width: 6px;
  border-left-style: solid;
  border-left-color: var(--accent);
}
.icd-layout-c-card .card-supporting-text{ padding: var(--space-2) var(--space-3); }
.icd-layout-c-meta{ justify-content: space-between; opacity: .85; }
.icd-layout-c-meta .caption{ margin:0; }
.icd-layout-c-title{
  margin-top: var(--space-2);
  font-weight: 650;
  line-height: 1.15;
}

/* Layout D */

.icd-d-grid{
  gap: var(--space-2);
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-auto-flow: dense;
}

/* Layout F */

.home-panel--f a.card-link .card{ transform-origin: 50% 40%; }
.home-panel--f a.card-link:nth-child(1) .card{ transform: rotate(-1.2deg); }
.home-panel--f a.card-link:nth-child(2) .card{ transform: rotate(1.8deg); }
.home-panel--f a.card-link:nth-child(3) .card{ transform: rotate(-0.6deg); }
.home-panel--f a.card-link:nth-child(4) .card{ transform: rotate(2.8deg); }
.home-panel--f a.card-link:nth-child(5) .card{ transform: rotate(-0.9deg); }
.home-panel--f a.card-link:nth-child(6) .card{ transform: rotate(0.7deg); }
.home-panel--f a.card-link:nth-child(7) .card{ transform: rotate(-0.5deg); }
.home-panel--f a.card-link:nth-child(8) .card{ transform: rotate(0.6deg); }

@media (min-width: 960px){
  .home-panel:not(.home-panel--f) a.card-link:nth-of-type(odd){ transform: rotate(-0.45deg); }
  .home-panel:not(.home-panel--f) a.card-link:nth-of-type(even){ transform: rotate(0.35deg); }
  .home-panel:not(.home-panel--f) a.card-link{ transform-origin: 12% 10%; }
}

/* Layout G */

.icd-g-grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Layout H */

.icd-h-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: var(--space-2);
}
.icd-h-li{ margin:0; padding:0; }
.icd-h-item{
  display:block;
  padding: var(--space-3);
  border: 2px solid var(--outline);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  text-decoration:none;
  color: inherit;
}
.icd-h-item:hover{
  background: color-mix(in srgb, var(--surface) 84%, var(--accent) 8%);
}
.icd-h-header{
  display:flex;
  align-items: baseline;
  gap: var(--space-3);
}
.icd-h-date{
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size: calc(var(--type-scale-base) * 0.78);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .9;
  white-space: nowrap;
}
.icd-h-title{
  font-weight: 750;
  line-height: 1.15;
}
.icd-h-excerpt{
  margin-top: var(--space-2);
  opacity: .9;
  font-size: calc(var(--type-scale-base) * 0.92);
  line-height: 1.25;
  color: var(--on-surface-variant);
}

/* Home */

.icd-pad-lg{ padding: var(--space-3); }
.icd-pad-md{ padding: var(--space-2) var(--space-3); }
.icd-meta{ opacity: .85; }
.icd-excerpt{
  margin-top: var(--space-2);
  opacity: .9;
  font-size: calc(var(--type-scale-base) * 0.95);
  line-height: 1.25;
}
.icd-hero-title{
  margin: var(--space-2) 0 var(--space-2);
  font-size: clamp(calc(var(--type-scale-base) * 1.15), 2vw, calc(var(--type-scale-base) * 1.7));
  line-height: 1.08;
}
.icd-hero-excerpt{ margin:0; opacity:.9; }

/* Sidebar */

.sidebar .zine-stamp-nav{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}
.sidebar .zine-stamp-nav__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.45rem 0.65rem;
  border: 2px dashed currentColor;
  border-radius: 10px;
  text-decoration:none;
  color: var(--on-surface);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  user-select:none;
  transform-origin: 20% 20%;
}
.sidebar .zine-stamp-nav__item:nth-child(odd){ transform: rotate(-1deg); }
.sidebar .zine-stamp-nav__item:nth-child(even){ transform: rotate(1deg); }

.sidebar .zine-stamp-nav__item:hover{
  background: color-mix(in srgb, currentColor 16%, var(--surface));
}
.sidebar .zine-stamp-nav__item:active{
  transform: translateY(1px) rotate(0deg);
}
.sidebar .zine-stamp-nav__item:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.sidebar .zine-stamp-nav__label{
  display:block;
  white-space: nowrap;
}

/* Inline-to-CSS migrations (front-page.php cleanup) */

.home-panel__head .section-header.icd-section-header{
  margin: 0 0 var(--space-3);
}
.icd-section-header__cluster{
  justify-content: space-between;
  align-items: baseline;
}
.icd-section-header__title{
  margin: 0;
  font-size: clamp(calc(var(--type-scale-base) * 1.05), 1.5vw, calc(var(--type-scale-base) * 1.35));
}
.icd-section-header__link{
  display: inline-flex;
  gap: var(--space-1);
  align-items: baseline;
  text-decoration: none;
}
.home-panel__head .section-subtitle.icd-section-header__subtitle{
  margin: var(--space-2) 0 0;
  max-width: 68ch;
}

.icd-mt-4{ margin-top: var(--space-4); }

/* Shared card utilities */
.icd-card-fit{
  overflow: hidden;
  height: 100%;
}
.icd-card-overflow{ overflow: hidden; }

.icd-pad-34{ padding: var(--space-3) var(--space-4); }

.icd-title-compact115{
  margin-top: var(--space-2);
  font-size: calc(var(--type-scale-base) * 1.05);
  font-weight: 650;
  line-height: 1.15;
}
.icd-title-compact11{
  margin-top: var(--space-2);
  font-size: calc(var(--type-scale-base) * 1.00);
  font-weight: 650;
  line-height: 1.1;
}
.icd-caption-85{ opacity: .85; }
.icd-caption-85-mb1{
  opacity: .85;
  margin-bottom: var(--space-1);
}

/* Layout D span helpers */
.icd-span-4{ grid-column: span 4; }
.icd-span-5{ grid-column: span 5; }
.icd-span-6{ grid-column: span 6; }
.icd-span-7{ grid-column: span 7; }
.icd-span-8{ grid-column: span 8; }

/* Layout E */
.icd-e-wrap{ position: relative; }
.icd-e-tape{
  position: absolute;
  inset: -10px 0 auto 0;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent),
    var(--accent) 14px,
    transparent 14px,
    transparent 22px
  );
  opacity: .6;
}
.icd-e-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.icd-e-card{ padding: var(--space-2) var(--space-3); }
.icd-justify-between{ justify-content: space-between; }

/* Layout F */
.icd-f-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Layout F rotation helpers */
.icd-rot-n2{ transform: rotate(-2deg); }
.icd-rot-1p2{ transform: rotate(1.2deg); }
.icd-rot-n1{ transform: rotate(-1deg); }
.icd-rot-2p2{ transform: rotate(2.2deg); }
.icd-rot-n1p6{ transform: rotate(-1.6deg); }
.icd-rot-1{ transform: rotate(1deg); }
.icd-rot-n2p4{ transform: rotate(-2.4deg); }
.icd-rot-1p6{ transform: rotate(1.6deg); }
.icd-rot-n0p8{ transform: rotate(-0.8deg); }
