/* Perspectives — ported from design-handoff/claude-design/PerspectivesIndex.dc.html
   (current state: "Coming soon." placeholder). mob = width < 760. */

:root{
  --ex:cubic-bezier(.16,1,.3,1);
  /* bigFs = floor(min(clamp(64, w*.12, 200), avail / 5.45)), avail = w - 2m - 340 - 24 on desktop */
  --big-fs:min(clamp(64px, 12vw, 200px), (100vw - 2 * var(--m) - 364px) / 5.45);
  --soon-fs:clamp(28px, 4vw, 64px);
}
@supports (width:round(down, 10.5px, 1px)){
  :root{ --big-fs:round(down, min(clamp(64px, 12vw, 200px), (100vw - 2 * var(--m) - 364px) / 5.45), 1px); }
}
@media (max-width:759px){
  :root{ --small:11px; --big-fs:min(clamp(64px, 12vw, 200px), (100vw - 2 * var(--m)) / 5.45); }
  @supports (width:round(down, 10.5px, 1px)){
    :root{ --big-fs:round(down, min(clamp(64px, 12vw, 200px), (100vw - 2 * var(--m)) / 5.45), 1px); }
  }
}

.perspectives main{min-height:100svh;padding-top:calc(var(--hdr-h) + 16svh)}

.ps-open{padding:0 var(--m);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:20px;align-items:end}
.ps-open__mask{overflow:hidden;padding-bottom:.04em}
.ps-h1{margin:0;font-size:var(--big-fs);font-weight:400;line-height:.92;letter-spacing:-.055em;transition:transform 1.1s var(--ex)}
.ps-intro{margin:0;max-width:340px;padding-bottom:calc(var(--big-fs) * .1);font-size:var(--small);line-height:1.5;letter-spacing:.01em;color:var(--sm);
  text-wrap:pretty;transition:opacity .8s ease .3s}

.ps-soon{margin-top:12svh;padding:0 var(--m)}
.ps-soon__in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10svh 0}
.ps-soon__h{margin:0;padding-bottom:.12em;font-size:var(--soon-fs);font-weight:400;line-height:1.1;letter-spacing:-.045em;
  transition:opacity .9s ease .2s, transform 1s var(--ex) .2s}
.ps-soon__p{margin:16px 0 0;max-width:44ch;font-size:var(--small);line-height:1.6;letter-spacing:.01em;color:var(--sm);text-wrap:pretty;
  transition:opacity .8s ease .5s}

.perspectives .foot{margin-top:18svh;border-top:0;row-gap:12px}
.ps-cta{display:flex;gap:6px;white-space:nowrap}

/* arrival + reveal (JS sets body.is-in after first paint, .is-seen on the section when it scrolls in) */
.js body:not(.is-in) .ps-h1{transform:translateY(105%)}
.js body:not(.is-in) .ps-intro{opacity:0}
.js .ps-soon:not(.is-seen) .ps-soon__h{opacity:0;transform:translateY(16px)}
.js .ps-soon:not(.is-seen) .ps-soon__p{opacity:0}

@media (max-width:759px){
  .perspectives main{padding-top:calc(var(--hdr-h) + 12svh)}
  .ps-open{grid-template-columns:minmax(0,1fr)}
  .ps-soon{margin-top:8svh}
  .ps-soon__in{padding:8svh 0}
  .perspectives .foot{grid-template-columns:minmax(0,1fr) auto}
}


/* ---------- articles grid (tiles) ---------- */
.ps-grid{margin-top:10svh;padding:0 var(--m)}
.ps-cards{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));column-gap:var(--m);row-gap:0}
.ps-card{min-width:0}
.ps-card__a{position:relative;display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);
  border-top:1px solid var(--rule);padding:28px 0 clamp(40px,5vw,72px);
  min-height:clamp(300px,30vw,440px);color:var(--fg);text-decoration:none;
  transition:opacity .7s var(--ex), transform .7s var(--ex)}
.theme-ready .ps-card__a{transition:opacity .7s var(--ex), transform .7s var(--ex), border-color var(--theme-t)}
.ps-card__top{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.ps-card__body{flex:1;display:flex;flex-direction:column;gap:clamp(16px,1.6vw,22px)}
.ps-card__title{margin:0;font-size:clamp(30px,3.4vw,52px);font-weight:400;line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.ps-card__dek{margin:0;max-width:52ch;font-size:var(--body);line-height:1.5;letter-spacing:-.01em;color:var(--sm);text-wrap:pretty}
.ps-card__foot{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.ps-card__read{position:relative;display:inline-block;padding-bottom:5px;white-space:nowrap}
.ps-card__read::before,.ps-card__read::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.ps-card__read::before{background:var(--rule)}
.ps-card__read::after{background:var(--fg);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)}
.ps-card__a:hover .ps-card__read::after,.ps-card__a:focus-visible .ps-card__read::after{transform:scaleX(1)}
.ps-card__a:hover .ps-card__title,.ps-card__a:focus-visible .ps-card__title{opacity:.62;transition:opacity .4s ease}

/* reveal */
.js .ps-card:not(.is-seen) .ps-card__a{opacity:0;transform:translateY(20px)}

@media (max-width:759px){
  .ps-grid{margin-top:8svh}
  .ps-card__a{min-height:0;padding:22px 0 40px}
}
@media (prefers-reduced-motion:reduce){
  .js .ps-card .ps-card__a{opacity:1;transform:none}
}