/* Mürekkebin Ötesinde — homepage teaser + story page
   Uses the site's existing typography and palette. */

.beyond-ink-home{
  position:relative;
  padding:clamp(92px,10vw,150px) var(--pad);
  border-top:1px solid var(--soft-line);
  border-bottom:1px solid var(--soft-line);
  overflow:hidden;
}
.beyond-ink-home__inner{max-width:1300px;margin:0 auto}
.beyond-ink-home__top{margin-bottom:clamp(30px,3.5vw,46px)}
.beyond-ink-home__top .mono{letter-spacing:.18em}
.beyond-ink-home h2{margin:0;max-width:820px;font-size:clamp(42px,5.4vw,76px);line-height:.98;letter-spacing:-.05em;font-weight:400}
.beyond-ink-home__link{margin-top:clamp(34px,4vw,52px)}

/* Story page */
.beyond-ink-page{background:#fff;color:#050505}
.beyond-ink-hero{padding:clamp(165px,18vw,235px) clamp(28px,5vw,78px) clamp(88px,9vw,130px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,8vw,130px);align-items:end;border-bottom:1px solid var(--v9-line,#e4e4e4)}
.beyond-ink-hero__copy{max-width:1050px}
.beyond-ink-hero h1{font-size:clamp(60px,7.8vw,118px);line-height:.9;letter-spacing:-.06em;font-weight:400;margin:24px 0 0}

.beyond-ink-story{padding:clamp(90px,11vw,160px) clamp(28px,5vw,78px);display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(50px,9vw,150px);border-bottom:1px solid var(--v9-line,#e4e4e4)}
.beyond-ink-story__label{display:flex;justify-content:space-between;align-items:flex-start;gap:28px}
.beyond-ink-story__meta{display:grid;gap:14px;align-content:start}
.beyond-ink-story__label strong{font-size:clamp(26px,3vw,42px);letter-spacing:-.03em;font-weight:500}
.beyond-ink-story__mark{width:clamp(72px,7vw,106px);height:auto;border-radius:8px;display:block;flex:0 0 auto}
.beyond-ink-story__body{max-width:760px}
.beyond-ink-story__body p{font-size:clamp(18px,1.55vw,23px);line-height:1.75;margin:0 0 30px;color:#262626}
.beyond-ink-story__body blockquote{margin:clamp(54px,7vw,90px) 0 0;padding:clamp(28px,4vw,46px) 0 0;border-top:1px solid var(--v9-line,#e4e4e4);font-size:clamp(30px,4.2vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:400}
.beyond-ink-story__body blockquote footer{margin-top:24px;font:10px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#656565}

.beyond-ink-end{padding:clamp(70px,9vw,120px) clamp(28px,5vw,78px);display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.beyond-ink-end h2{margin:18px 0 0;font-size:clamp(44px,6vw,88px);line-height:.92;letter-spacing:-.055em;font-weight:400;max-width:760px}
.beyond-ink-end .text-link{margin-top:0;white-space:nowrap}

@media(max-width:820px){
  .beyond-ink-home{padding:84px 44px 92px}
  .beyond-ink-home__top{margin-bottom:30px}
  .beyond-ink-home h2{font-size:clamp(38px,10vw,48px);line-height:1.02;letter-spacing:-.045em;max-width:560px}
  .beyond-ink-home__link{margin-top:36px}

  .beyond-ink-hero{grid-template-columns:1fr;padding:150px 44px 82px;gap:44px}
  .beyond-ink-hero h1{font-size:clamp(48px,13vw,64px);line-height:.92}
  .beyond-ink-story__mark{width:76px}
  .beyond-ink-story{grid-template-columns:1fr;padding:82px 44px;gap:44px}
  .beyond-ink-story__body p{font-size:18px}
  .beyond-ink-story__body blockquote{font-size:clamp(32px,9vw,46px)}
  .beyond-ink-end{padding:76px 44px 92px;display:block}
  .beyond-ink-end .text-link{margin-top:38px}
}

@media(max-width:390px){
  .beyond-ink-home,.beyond-ink-hero,.beyond-ink-story,.beyond-ink-end{padding-left:28px;padding-right:28px}
  .beyond-ink-home h2{font-size:38px}
}