/* =========================================================
   MAGAZINE THEME — HOME HERO
   Editorial front page
========================================================= */


/* =========================================================
   HERO BLOCK
========================================================= */

html[data-theme="magazine"] .home-hero-block,
html[data-theme-preview="magazine"] .home-hero-block{
  margin:0 0 46px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}


/* =========================================================
   MAGAZINE WRAPPER
========================================================= */

html[data-theme="magazine"] .h5-magazine,
html[data-theme-preview="magazine"] .h5-magazine{
  position:relative;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

html[data-theme="magazine"] .h5-magazine::before,
html[data-theme="magazine"] .h5-magazine::after,
html[data-theme-preview="magazine"] .h5-magazine::before,
html[data-theme-preview="magazine"] .h5-magazine::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   HERO HEADING
========================================================= */

html[data-theme="magazine"] .h5-magazine__head,
html[data-theme-preview="magazine"] .h5-magazine__head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(240px,380px);
  align-items:end;
  gap:28px;

  margin:0 0 12px !important;
  padding:0 0 10px !important;

  background:transparent !important;

  border:0 !important;
  border-bottom:4px solid #111 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}

html[data-theme="magazine"] .h5-magazine__head > div:first-child,
html[data-theme-preview="magazine"] .h5-magazine__head > div:first-child{
  position:relative;
  padding-left:18px;
}

html[data-theme="magazine"] .h5-magazine__head > div:first-child::before,
html[data-theme-preview="magazine"] .h5-magazine__head > div:first-child::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:7px;
  background:var(--mag-red, #dc2626);
}


/* =========================================================
   EYEBROW
========================================================= */

html[data-theme="magazine"] .h5-magazine__eyebrow,
html[data-theme-preview="magazine"] .h5-magazine__eyebrow{
  display:inline-flex !important;
  align-items:center;

  min-height:25px;

  margin:0 0 10px !important;
  padding:0 9px !important;

  color:#fff !important;
  background:var(--mag-red, #dc2626) !important;

  border:0 !important;
  border-radius:0 !important;

  font-family:var(--font-sans, Arial, sans-serif);
  font-size:9px !important;
  font-weight:950 !important;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;

  box-shadow:none !important;
}


/* =========================================================
   MAIN HEADING
========================================================= */

html[data-theme="magazine"] .h5-magazine__head h2,
html[data-theme-preview="magazine"] .h5-magazine__head h2{
  margin:0 !important;

  color:#111 !important;

  font-family:var(--font-serif, Georgia, serif);
  font-size:clamp(34px,3vw,48px) !important;
  font-weight:800 !important;
  line-height:.95 !important;
  letter-spacing:-.045em !important;

  text-wrap:balance;
}


/* =========================================================
   NOTE
========================================================= */

html[data-theme="magazine"] .h5-magazine__note,
html[data-theme-preview="magazine"] .h5-magazine__note{
  max-width:360px;
  margin:0 0 2px auto !important;

  color:#666 !important;

  font-family:var(--font-serif, Georgia, serif);
  font-size:14px !important;
  font-weight:500;
  line-height:1.45;
  text-align:right;
}


/* =========================================================
   HERO LAYOUT
========================================================= */

html[data-theme="magazine"] .h5-magazine__layout,
html[data-theme-preview="magazine"] .h5-magazine__layout{
  display:grid !important;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,.95fr);
  grid-template-rows:1fr;

  gap:0 !important;

  min-height:440px;
  height:440px;

  margin:0 !important;
  padding:0 !important;

  background:#fff !important;

  border:1px solid #d7d7d7 !important;
  border-radius:0 !important;

  box-shadow:none !important;
  overflow:hidden;
}


/* =========================================================
   MAIN COVER
========================================================= */

html[data-theme="magazine"] .h5-cover,
html[data-theme-preview="magazine"] .h5-cover{
  position:relative;

  display:block !important;

  min-width:0;
  min-height:440px;
  height:440px;

  margin:0 !important;
  padding:0 !important;

  color:#fff !important;
  background:#111 !important;

  border:0 !important;
  border-right:1px solid #d7d7d7 !important;
  border-radius:0 !important;

  box-shadow:none !important;
  overflow:hidden;

  text-decoration:none !important;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

html[data-theme="magazine"] .h5-cover > img,
html[data-theme-preview="magazine"] .h5-cover > img{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  margin:0 !important;

  object-fit:cover;
  object-position:center;

  border:0 !important;
  border-radius:0 !important;

  filter:none;
  transform:scale(1);

  transition:
    transform .55s ease,
    filter .55s ease;
}

html[data-theme="magazine"] .h5-cover:hover > img,
html[data-theme-preview="magazine"] .h5-cover:hover > img{
  transform:scale(1.035);
  filter:saturate(.92) contrast(1.06);
}


/* =========================================================
   MAIN SHADE
========================================================= */

html[data-theme="magazine"] .h5-cover__shade,
html[data-theme-preview="magazine"] .h5-cover__shade{
  position:absolute;
  z-index:1;
  inset:0;

  display:block !important;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.50) 52%,
      rgba(0,0,0,.12) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.20) 68%,
      rgba(0,0,0,.06) 100%
    ) !important;

  border:0 !important;
  border-radius:0 !important;

  pointer-events:none;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

html[data-theme="magazine"] .h5-cover__content,
html[data-theme-preview="magazine"] .h5-cover__content{
  position:absolute !important;
  z-index:2;
  right:auto;
  bottom:0;
  left:0;

  display:block !important;

  width:min(84%,680px);

  margin:0 !important;
  padding:24px !important;

  color:#fff !important;
  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


/* =========================================================
   DATES
========================================================= */

html[data-theme="magazine"] .h5-date,
html[data-theme-preview="magazine"] .h5-date{
  display:inline-flex !important;
  align-items:center;

  min-height:23px;

  margin:0 0 11px !important;
  padding:0 8px !important;

  color:#fff !important;
  background:var(--mag-red, #dc2626) !important;

  border:0 !important;
  border-radius:0 !important;

  font-family:var(--font-sans, Arial, sans-serif);
  font-size:9px !important;
  font-weight:900 !important;
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;

  box-shadow:none !important;
}


/* =========================================================
   MAIN TITLE
========================================================= */

html[data-theme="magazine"] .h5-cover__content h3,
html[data-theme-preview="magazine"] .h5-cover__content h3{
  max-width:15ch;

  margin:0 !important;

  color:#fff !important;

  font-family:var(--font-serif, Georgia, serif);
  font-size:clamp(30px,2.5vw,42px) !important;
  font-weight:800 !important;
  line-height:.96 !important;
  letter-spacing:-.035em !important;

  text-wrap:balance;
  overflow-wrap:anywhere;
  hyphens:auto;
}


/* =========================================================
   MAIN EXCERPT
========================================================= */

html[data-theme="magazine"] .h5-cover__content p,
html[data-theme-preview="magazine"] .h5-cover__content p{
  max-width:560px;

  margin:12px 0 0 !important;

  color:rgba(255,255,255,.86) !important;

  font-family:var(--font-serif, Georgia, serif);
  font-size:13px !important;
  font-weight:500;
  line-height:1.4;
}


/* =========================================================
   MAIN CTA
========================================================= */

html[data-theme="magazine"] .h5-cta,
html[data-theme-preview="magazine"] .h5-cta{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;

  min-height:34px;

  margin:14px 0 0 !important;
  padding:0 12px !important;

  color:#fff !important;
  background:transparent !important;

  border:1px solid rgba(255,255,255,.8) !important;
  border-bottom:3px solid var(--mag-red, #dc2626) !important;
  border-radius:0 !important;

  font-family:var(--font-sans, Arial, sans-serif);
  font-size:10px !important;
  font-weight:950 !important;
  line-height:1;
  letter-spacing:.07em;
  text-transform:uppercase;

  box-shadow:none !important;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}

html[data-theme="magazine"] .h5-cover:hover .h5-cta,
html[data-theme-preview="magazine"] .h5-cover:hover .h5-cta{
  color:#111 !important;
  background:#fff !important;
  border-color:#fff !important;
  border-bottom-color:var(--mag-red, #dc2626) !important;
}


/* =========================================================
   SIDE STACK
========================================================= */

html[data-theme="magazine"] .h5-stack,
html[data-theme-preview="magazine"] .h5-stack{
  display:grid !important;
  grid-template-columns:1fr;
  grid-template-rows:repeat(4,minmax(0,1fr));

  min-width:0;
  min-height:440px;
  height:440px;

  margin:0 !important;
  padding:0 !important;

  background:#fff !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


/* =========================================================
   SIDE ITEM
========================================================= */

html[data-theme="magazine"] .h5-mini,
html[data-theme-preview="magazine"] .h5-mini{
  position:relative;

  display:grid !important;
  grid-template-columns:92px minmax(0,1fr);
  align-items:stretch;

  min-width:0;
  min-height:0;

  margin:0 !important;
  padding:0 !important;

  color:#111 !important;
  background:#fff !important;

  border:0 !important;
  border-bottom:1px solid #dedede !important;
  border-radius:0 !important;

  box-shadow:none !important;
  overflow:hidden;

  text-decoration:none !important;
}

html[data-theme="magazine"] .h5-mini:last-child,
html[data-theme-preview="magazine"] .h5-mini:last-child{
  border-bottom:0 !important;
}


/* =========================================================
   SIDE IMAGE
========================================================= */

html[data-theme="magazine"] .h5-mini > img,
html[data-theme-preview="magazine"] .h5-mini > img{
  position:relative;
  z-index:1;

  display:block;

  width:92px;
  height:100%;
  min-height:100%;

  margin:0 !important;

  object-fit:cover;
  object-position:center;

  border:0 !important;
  border-radius:0 !important;

  filter:none;
  transform:scale(1);

  transition:
    transform .45s ease,
    filter .45s ease;
}

html[data-theme="magazine"] .h5-mini:hover > img,
html[data-theme-preview="magazine"] .h5-mini:hover > img{
  transform:scale(1.04);
  filter:saturate(.9) contrast(1.06);
}


/* =========================================================
   REMOVE SIDE SHADE
========================================================= */

html[data-theme="magazine"] .h5-mini__shade,
html[data-theme-preview="magazine"] .h5-mini__shade{
  display:none !important;
}


/* =========================================================
   SIDE CONTENT
========================================================= */

html[data-theme="magazine"] .h5-mini__content,
html[data-theme-preview="magazine"] .h5-mini__content{
  position:relative !important;
  z-index:2;
  inset:auto !important;

  display:flex !important;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;

  min-width:0;
  min-height:0;

  margin:0 !important;
  padding:10px 12px !important;

  color:#111 !important;
  background:#fff !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


/* =========================================================
   SIDE DATE
========================================================= */

html[data-theme="magazine"] .h5-mini .h5-date,
html[data-theme-preview="magazine"] .h5-mini .h5-date{
  display:inline-flex !important;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;

  width:auto;
  min-width:max-content;
  min-height:18px;

  margin:0 0 6px !important;
  padding:0 7px !important;

  font-size:8px !important;
  line-height:1 !important;
  white-space:nowrap;
}


/* =========================================================
   SIDE TITLE
========================================================= */
html[data-theme="magazine"] .h5-mini__content h3,
html[data-theme-preview="magazine"] .h5-mini__content h3{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;

  margin:0 !important;

  color:#111 !important;

  font-family:var(--font-serif, Georgia, serif);
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.22 !important;
  letter-spacing:-.01em !important;

  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;

  transition:color .18s ease;
}

html[data-theme="magazine"] .h5-mini:hover .h5-mini__content h3,
html[data-theme-preview="magazine"] .h5-mini:hover .h5-mini__content h3{
  color:var(--mag-red, #dc2626) !important;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width:980px){

  html[data-theme="magazine"] .h5-magazine__head,
  html[data-theme-preview="magazine"] .h5-magazine__head{
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:18px !important;
    padding-bottom:16px !important;
  }

  html[data-theme="magazine"] .h5-magazine__head h2,
  html[data-theme-preview="magazine"] .h5-magazine__head h2{
    font-size:clamp(44px,4.5vw,72px) !important;
    line-height:.9 !important;
    letter-spacing:-.06em !important;
  }

  html[data-theme="magazine"] .h5-magazine__note,
  html[data-theme-preview="magazine"] .h5-magazine__note{
    max-width:600px;
    margin-left:18px !important;
    text-align:left;
  }

  html[data-theme="magazine"] .h5-magazine__layout,
  html[data-theme-preview="magazine"] .h5-magazine__layout{
    grid-template-columns:1fr;
    min-height:0;
    height:auto;
  }

  html[data-theme="magazine"] .h5-cover,
  html[data-theme-preview="magazine"] .h5-cover{
    min-height:540px;
    height:auto;
    border-right:0 !important;
    border-bottom:1px solid #d7d7d7 !important;
  }

  html[data-theme="magazine"] .h5-cover__content,
  html[data-theme-preview="magazine"] .h5-cover__content{
    width:min(88%,860px);
    padding:32px !important;
  }

  html[data-theme="magazine"] .h5-cover__content h3,
  html[data-theme-preview="magazine"] .h5-cover__content h3{
    max-width:14ch;
    font-size:clamp(44px,4.6vw,68px) !important;
    line-height:.91 !important;
    letter-spacing:-.058em !important;
  }

  html[data-theme="magazine"] .h5-cover__content p,
  html[data-theme-preview="magazine"] .h5-cover__content p{
    max-width:680px;
    margin-top:20px !important;
    font-size:16px !important;
    line-height:1.55;
  }

  html[data-theme="magazine"] .h5-cta,
  html[data-theme-preview="magazine"] .h5-cta{
    min-height:40px;
    margin-top:23px !important;
    padding:0 15px !important;
  }

  html[data-theme="magazine"] .h5-stack,
  html[data-theme-preview="magazine"] .h5-stack{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(150px,auto));
    min-height:0;
    height:auto;
  }

  html[data-theme="magazine"] .h5-mini,
  html[data-theme-preview="magazine"] .h5-mini{
    grid-template-columns:120px minmax(0,1fr);
    min-height:150px;
    border-right:1px solid #dedede !important;
  }

  html[data-theme="magazine"] .h5-mini:nth-child(even),
  html[data-theme-preview="magazine"] .h5-mini:nth-child(even){
    border-right:0 !important;
  }

  html[data-theme="magazine"] .h5-mini > img,
  html[data-theme-preview="magazine"] .h5-mini > img{
    width:120px;
  }

  html[data-theme="magazine"] .h5-mini__content,
  html[data-theme-preview="magazine"] .h5-mini__content{
    padding:14px 15px !important;
  }

  html[data-theme="magazine"] .h5-mini .h5-date,
  html[data-theme-preview="magazine"] .h5-mini .h5-date{
    margin-bottom:8px !important;
  }

  html[data-theme="magazine"] .h5-mini__content h3,
  html[data-theme-preview="magazine"] .h5-mini__content h3{
    font-size:15px !important;
    line-height:1.15 !important;
    -webkit-line-clamp:4;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

  html[data-theme="magazine"] .home-hero-block,
  html[data-theme-preview="magazine"] .home-hero-block{
    margin-bottom:34px !important;
  }

  html[data-theme="magazine"] .h5-magazine__head h2,
  html[data-theme-preview="magazine"] .h5-magazine__head h2{
    font-size:40px !important;
  }

  html[data-theme="magazine"] .h5-cover,
  html[data-theme-preview="magazine"] .h5-cover{
    min-height:490px;
  }

  html[data-theme="magazine"] .h5-cover__content,
  html[data-theme-preview="magazine"] .h5-cover__content{
    width:100%;
    padding:24px !important;
  }

  html[data-theme="magazine"] .h5-cover__content h3,
  html[data-theme-preview="magazine"] .h5-cover__content h3{
    max-width:100%;
    font-size:clamp(38px,11vw,54px) !important;
    line-height:.94 !important;
  }

  html[data-theme="magazine"] .h5-cover__content p,
  html[data-theme-preview="magazine"] .h5-cover__content p{
    display:none;
  }

  html[data-theme="magazine"] .h5-stack,
  html[data-theme-preview="magazine"] .h5-stack{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  html[data-theme="magazine"] .h5-mini,
  html[data-theme-preview="magazine"] .h5-mini{
    grid-template-columns:112px minmax(0,1fr);
    min-height:128px;

    border-right:0 !important;
  }

  html[data-theme="magazine"] .h5-mini > img,
  html[data-theme-preview="magazine"] .h5-mini > img{
    width:112px;
  }

  html[data-theme="magazine"] .h5-mini__content,
  html[data-theme-preview="magazine"] .h5-mini__content{
    padding:14px !important;
  }

  html[data-theme="magazine"] .h5-mini__content h3,
  html[data-theme-preview="magazine"] .h5-mini__content h3{
    font-size:15px !important;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:440px){

  html[data-theme="magazine"] .h5-cover,
  html[data-theme-preview="magazine"] .h5-cover{
    min-height:440px;
  }

  html[data-theme="magazine"] .h5-cover__content,
  html[data-theme-preview="magazine"] .h5-cover__content{
    padding:20px !important;
  }

  html[data-theme="magazine"] .h5-cover__content h3,
  html[data-theme-preview="magazine"] .h5-cover__content h3{
    font-size:38px !important;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  html[data-theme="magazine"] .h5-cover > img,
  html[data-theme-preview="magazine"] .h5-cover > img,
  html[data-theme="magazine"] .h5-mini > img,
  html[data-theme-preview="magazine"] .h5-mini > img{
    transition:none;
  }
}