/* Establish cascade layer order once */
@layer base, components, edition;

@layer edition {
/* =========================
   SD30 (edition overrides)
   Load AFTER base.css and components.css
   ========================= */

:root{
  /* Edition palette (adjust freely per issue) */
  --accent: hsl(0 3% 24%);
  --text-color: #484848;
  /* --accent-gradient: linear-gradient(90deg, #FF9966, #FF5E62);
--accent-gradient: linear-gradient(90deg, #00DBDE, #0077FF);
--accent-gradient: linear-gradient(180deg, #009688 0%, #FFB199 100%); */

  --accent-gradient-start: #0aaa25;
    --accent-gradient-end: #11aeae;
    --accent-gradient: linear-gradient(0deg, var(--accent-gradient-start), var(--accent-gradient-end));
}



  .author {
    background: linear-gradient(0deg, var(--accent-gradient-start), var(--accent-gradient-end));
  }

  .author::after {
    border-top-color: var(--accent-gradient-start);
  }



/* Edition imagery */
.cover-img{
  /* Swap this per edition */

  background: var(--accent-gradient);
  /* url(/img/sd30/cover.webp)  */

}

/* Optional micro-tweaks unique to SD30 */
.titles-container h2.is-white{ color: var(--is-white); }


.a4 video {
  object-position: bottom;
}


/* Light/Dark control over the chip background */
:root {
  --video-credit-bg: color-mix(in oklab, var(--is-dark, #111) 30%, transparent);
  --video-credit-fg: #fff;
}

@media (prefers-color-scheme: light) {
  :root {
    --video-credit-bg: color-mix(in oklab, #000 24%, transparent);
    --video-credit-fg: #fff;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --video-credit-bg: color-mix(in oklab, #fff 12%, transparent);
    --video-credit-fg: #f5f5f5;
  }
}





/* SD30 theme overrides */
:root {
  /* pick something that works in light mode */
  --split-card-bg: var(--surface-elevated); /* or e.g. hsl(0 0% 100%) */
}

/* Dark mode example (if you have a dark theme class or media query) */
@media (prefers-color-scheme: dark){
  :root {
    --split-card-bg: #384561; /* or a token you already use */
  }
}
/* Or scope to the issue body if you prefer:
body.page { --split-card-bg: var(--surface-elevated); }
*/

:root {
  /* fallback if not set */
  --intro-surface: var(--lighter-accent);
  --intro-on-surface: var(--is-dark);
  --intro-border: color-mix(in oklab, #000 10%, transparent);
}

/* Optional: dark mode tune-up (if you use a class or @media) */
@media (prefers-color-scheme: dark) {
  :root {
    --intro-surface: color-mix(in oklab, var(--bkgrd-color) 80%, var(--accent) 20%);
    --intro-on-surface: var(--is-white);
    --intro-border: color-mix(in oklab, #fff 12%, transparent);
  }
}

/* ---- COVER LAYOUT ---- */

.cover-page {
  max-width: 820px;
  margin: 0 auto 4rem;
  padding: 2rem 1.5rem 3rem;
  background: #fff;
}

/* Top line: date / issue / URL */
.cover-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.cover-meta a {
  color: inherit;
  text-decoration: underline;
}

/* Masthead */
.cover-masthead {
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}

.cover-logo-main {
  font-size: 3rem;
}

.cover-logo-sub {
  font-size: 2.2rem;
  margin-left: 0.15em;
}

/* Tagline */
.cover-tagline {
  font-family: "Lato", system-ui, sans-serif;
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

/* ---- MAIN COVER PANEL ---- */

.cover-panel {
  position: relative;
  margin: 0 auto;
  background: #ddd;
  overflow: hidden;
}

/* speech-notch overlapping from the page into the image */
.cover-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;                   /* how far it bites into the panel */
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 18px solid #fff; /* same as page background */
  z-index: 3;
}

/* -------------------------------
   FULL-WIDTH COVER IMAGE PANEL
--------------------------------*/

.cover-full-image {
  width: 100vw;                           /* full browser width */
  margin-left: calc(50% - 50vw);          /* pull out of centered layout */
  position: relative;
  
  /* Portrait aspect ratio (choose any you prefer): 
     4/5 = tall portrait, works great for magazine cover */
  aspect-ratio: 4 / 5;                    

  background-image: var(--cover-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  /* align-items: flex-end;                   push the title to bottom */
  overflow: hidden;
}

/* speech-notch */
.cover-full-image::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -20px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #fff;         /* same as page bg */
  z-index: 3;
}

.cover-overlay {
  width: 100%;
  padding: 3rem 2rem;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.0) 55%
  );
  color: #fff;
}

.cover-title {
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  max-width: 28ch;
}

/* responsive tweaks */
@media (max-width: 700px) {
  .cover-overlay {
    padding: 2rem 1.25rem;
  }
}

/* ----------------------------/
             COVER
/------------------------------*/

.cover-img {
  background-image: url(../img/a1_main.webp);
  background-position: center;
  min-height: 70vh;
  align-items: flex-start;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .cover-img {
  min-height: 900px;
      background-repeat: no-repeat;
      background-size: cover;
  }
}

@media screen and (min-width: 600px) {
  .main-title h1 {
    font-size: 4rem;
  }
}

.cover-gradient {
    background: rgb(0, 0, 0);
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.767927239255077) 0%, rgba(255, 255, 255, 0) 77%);
    width: 100%;
    height:100%;
}

@media (min-width:1024px){ 
  
  .cover-img{ min-height:900px; } }


.cover-gradient{
  background: linear-gradient(180deg, rgba(0,0,0,.768) 0%, rgba(255,255,255,0) 77%);
  width:100%;
     height:100%;
}

.title-link {
  line-height:1.1rem;
}
  .title-link span {
    font-weight: 700;
    background: var(--accent);
    text-decoration: none;
    background: var(--accent-gradient-start);
  }

  .title-link span span {
        font-weight: 400;
    background: var(--accent);
    text-decoration: none;
    background: var(--accent-gradient-start);

  }


} /* end @layer edition */