@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  color-scheme:dark;
  --bg:#111715;
  --ink:#f3f5ed;
  --muted:#a4afa8;
  --line:#303a33;
  --accent:#c6f777;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

.page {
  max-width:1536px;
  margin:auto;
  padding:0 6.2%;
}

header {
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px;
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:-1.2px;
  color:var(--ink);
  text-decoration:none;
}

.brand-icon {
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  background:var(--accent);
  color:var(--bg);
  font-size:30px;
  border-radius:8px;
  line-height:1;
}

.brand-light {
  font-weight:400;
}

.header-note,.edition {
  font:12px var(--mono);
  letter-spacing:1.8px;
  color:var(--muted);
}

.edition {
  display:flex;
  align-items:center;
  gap:30px;
}

.edition span {
  font-size:24px;
  color:var(--accent);
}

main {
  padding-top:80px;
}

.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:7%;
  align-items:center;
  padding-bottom:76px;
}

.eyebrow {
  font:12px var(--mono);
  letter-spacing:1.6px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:26px;
}

.construction {
  color:var(--accent);
  font-size:21px;
  font-weight:700;
}

h1 {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(3.6rem,6vw,5.8rem);
  line-height:1.045;
  letter-spacing:-.065em;
  font-weight:500;
  margin:0 0 28px;
}

.new {
  color:var(--accent);
  white-space:nowrap;
}

.period {
  color:var(--ink);
}

.description {
  font-size:18px;
  line-height:1.75;
  color:#bbc4bd;
  margin:0 0 16px;
  max-width:480px;
}

.return-note {
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}

.coming {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:30px;
  font-size:17px;
  font-weight:600;
}

.coming-icon {
  width:33px;
  height:33px;
  border:1px solid #526141;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--accent);
  font-size:23px;
}

.topics {
  display:flex;
  gap:23px;
  margin-top:49px;
  font:12px var(--mono);
  letter-spacing:1.5px;
  color:#c4cdc3;
}

.topics span:nth-child(even) {
  color:#65705f;
}

.visual {
  position:relative;
  align-self:stretch;
  min-height:520px;
  display:flex;
  flex-direction:column;
  background:#c6f777;
  border:1px solid #d2fa96;
  color:#192518;
  transform:rotate(2deg);
  border-radius:3px;
  box-shadow:12px 15px 0 #1d2920;
}

.visual-top,.visual-bottom {
  font:10px var(--mono);
  letter-spacing:1px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:18px 20px;
}

.visual-top {
  border-bottom:1px solid #95bc58;
}

.visual-top>span:last-child {
  font-size:20px;
  line-height:12px;
}

.image-wrap {
  flex:1;
  position:relative;
  overflow:hidden;
  min-height:400px;
  background:radial-gradient(ellipse at 65% 90%,#80a545 0,transparent 64%);
}

.background-type {
  position:absolute;
  left:25px;
  top:22px;
  font:700 clamp(4rem,6.9vw,7rem)/.91 'Space Grotesk',sans-serif;
  letter-spacing:-.075em;
  color:#476d2a;
  opacity:.65;
}

.image-wrap img {
  position:absolute;
  height:94%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  bottom:-3%;
  left:50%;
  transform:translateX(-47%);
  filter:drop-shadow(4px 5px 0 #718d46);
}

.code-label {
  position:absolute;
  bottom:84px;
  left:-27px;
  transform:rotate(-6deg);
  background:#f2f5e8;
  padding:15px 20px;
  box-shadow:0 5px 15px #0f1e1733;
  font:13px var(--mono);
  border:1px solid #1b2c18;
  display:flex;
  gap:16px;
  align-items:center;
}

.code-label>span {
  font-size:24px;
  font-weight:bold;
}

.visual-bottom {
  background:#b8e76e;
  border-top:1px solid #95bc58;
  min-height:53px;
  letter-spacing:.6px;
}

.visual-bottom>span:first-child {
  display:flex;
  align-items:center;
  gap:8px;
}

.mini-square {
  height:6px;
  width:6px;
  background:#294b20;
}

.bottom-line {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:26px 0;
  border-top:1px solid var(--line);
  color:#c2cac2;
  font-size:15px;
}

.small-code {
  font:13px var(--mono);
  color:#899b80;
}

footer {
  padding:24px 0 30px;
  border-top:1px solid var(--line);
  color:#88968b;
  display:flex;
  justify-content:space-between;
  font-size:12px;
}

a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:8px;
}

@media(min-width:1450px) {
  main {
    padding-top:100px;
  }
  .hero {
    padding-bottom:90px;
  }
}

@media(max-width:1000px) {
  .page {
    padding:0 5%;
  }
  .header-note {
    display:none;
  }
  .hero {
    gap:5%;
  }
  h1 {
    font-size:clamp(3.1rem,6.4vw,4.5rem);
  }
  .visual {
    min-height:460px;
  }
  .image-wrap {
    min-height:350px;
  }
  .description {
    font-size:16px;
  }
  .desktop-break {
    display:none;
  }
  .visual-bottom {
    font-size:9px;
    padding:16px 10px;
  }
  .visual-top {
    font-size:9px;
    padding:18px 12px;
  }
  .topics {
    gap:16px;
  }
}

@media(max-width:700px) {
  header {
    min-height:88px;
  }
  .brand {
    font-size:25px;
  }
  .edition {
    font-size:10px;
    letter-spacing:1px;
    gap:14px;
  }
  main {
    padding-top:44px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:48px;
    padding-bottom:47px;
  }
  .eyebrow {
    font-size:11px;
    margin-bottom:23px;
  }
  h1 {
    font-size:clamp(3.5rem,11.4vw,5rem);
    letter-spacing:-.06em;
    margin-bottom:24px;
  }
  .description {
    font-size:17px;
  }
  .topics {
    margin-top:32px;
  }
  .visual {
    width:calc(100% - 18px);
    max-width:450px;
    margin:0 auto;
    min-height:440px;
  }
  .image-wrap {
    min-height:350px;
  }
  .background-type {
    font-size:85px;
  }
  .code-label {
    left:-12px;
  }
  .visual-top,.visual-bottom {
    font-size:10px;
  }
  .bottom-line {
    font-size:14px;
    line-height:1.7;
  }
  .small-code {
    display:none;
  }
  footer {
    font-size:12px;
    gap:15px;
    flex-wrap:wrap;
  }
  footer>span:nth-child(2) {
    display:none;
  }
}

@media(prefers-reduced-motion:no-preference) {
  .intro {
    animation:arrive .7s ease-out both;
  }
  .visual {
    animation:card .9s ease-out both;
  }
  @keyframes arrive {
    from {
      opacity:0;
      translate:0 12px;
    }
    to {
      opacity:1;
      translate:0 0;
    }
  }
  @keyframes card {
    from {
      opacity:0;
      translate:0 18px;
      rotate:-3deg;
    }
    to {
      opacity:1;
      translate:0 0;
      rotate:0deg;
    }
  }
}