/* ==========================================================================
   INVEST TELANGANA — Press releases
   Loaded after main.css. Everything is scoped .pr-* so the shared system
   (header, footer, buttons, type, .rv motion) carries over untouched.
   --------------------------------------------------------------------------
   01  Tokens
   02  Hero
   03  Filter bar
   04  The grid
   05  The card
   06  Responsive
   ========================================================================== */

/* 01 ── TOKENS ────────────────────────────────────────────────────────── */

.pr{
  --pr-indigo:#2d308f;          /* the four brand colours, by name */
  --pr-orange:#ef6106;
  /* the deep green from the logo, used by the hero badge */
  --pr-logo-green:#007028;
  --pr-blue:#0483ce;
  --pr-green:#06a519;
  --pr-ink:#0A0C2B;
  --c:var(--pr-indigo);         /* the live card's category colour */
}

/* every category owns one brand colour, shared by its chip, its cards and
   its single-release hero; a category with no chip below simply carries no
   press releases yet -- .pr's default indigo covers it if that changes */
.pr-card[data-cat="inv"]                          {--c:#2d308f}
.pr-card[data-cat="infra"]                        {--c:#0483ce}
.pr-card[data-cat="energy"]                       {--c:#06a519}
.pr-card[data-cat="space"]                        {--c:#ef6106}
.pr-card[data-cat="innov"]                        {--c:#0060E0}
.pr-card[data-cat="it-and-gcc"]                   {--c:#0aa5c2}
.pr-card[data-cat="data-centres"]                 {--c:#6b4fd8}
.pr-card[data-cat="education-and-research"]       {--c:#d19c00}
.pr-card[data-cat="aerospace-and-defence"]        {--c:#ef6106}
.pr-card[data-cat="life-sciences"]                {--c:#c2417a}
.pr-card[data-cat="electronics-and-semiconductors"]{--c:#0e8f7a}
.pr-card[data-cat="engineering-and-capital-goods"] {--c:#5b6b8c}
.pr-card[data-cat="food-processing"]              {--c:#7a8f0e}
.pr-card[data-cat="logistics-and-supply-chain"]   {--c:#b8342a}
.pr-card[data-cat="tourism-and-hospitality"]      {--c:#e0575a}

.pr-chip[data-cat="inv"]                          {--c:#2d308f}
.pr-chip[data-cat="infra"]                        {--c:#0483ce}
.pr-chip[data-cat="energy"]                       {--c:#06a519}
.pr-chip[data-cat="space"]                        {--c:#ef6106}
.pr-chip[data-cat="innov"]                        {--c:#0060E0}
.pr-chip[data-cat="all"]                          {--c:#2d308f}
.pr-chip[data-cat="it-and-gcc"]                   {--c:#0aa5c2}
.pr-chip[data-cat="data-centres"]                 {--c:#6b4fd8}
.pr-chip[data-cat="education-and-research"]       {--c:#d19c00}
.pr-chip[data-cat="aerospace-and-defence"]        {--c:#ef6106}
.pr-chip[data-cat="life-sciences"]                {--c:#c2417a}
.pr-chip[data-cat="electronics-and-semiconductors"]{--c:#0e8f7a}
.pr-chip[data-cat="engineering-and-capital-goods"] {--c:#5b6b8c}
.pr-chip[data-cat="food-processing"]              {--c:#7a8f0e}
.pr-chip[data-cat="logistics-and-supply-chain"]   {--c:#b8342a}
.pr-chip[data-cat="tourism-and-hospitality"]      {--c:#e0575a}

.pr-single[data-cat="inv"]                          {--c:#2d308f}
.pr-single[data-cat="infra"]                        {--c:#0483ce}
.pr-single[data-cat="energy"]                       {--c:#06a519}
.pr-single[data-cat="space"]                        {--c:#ef6106}
.pr-single[data-cat="innov"]                        {--c:#0060E0}
.pr-single[data-cat="it-and-gcc"]                   {--c:#0aa5c2}
.pr-single[data-cat="data-centres"]                 {--c:#6b4fd8}
.pr-single[data-cat="education-and-research"]       {--c:#d19c00}
.pr-single[data-cat="aerospace-and-defence"]        {--c:#ef6106}
.pr-single[data-cat="life-sciences"]                {--c:#c2417a}
.pr-single[data-cat="electronics-and-semiconductors"]{--c:#0e8f7a}
.pr-single[data-cat="engineering-and-capital-goods"] {--c:#5b6b8c}
.pr-single[data-cat="food-processing"]              {--c:#7a8f0e}
.pr-single[data-cat="logistics-and-supply-chain"]   {--c:#b8342a}
.pr-single[data-cat="tourism-and-hospitality"]      {--c:#e0575a}

/* 02 ── HERO ─────────────────────────────────────────────────────────── */
/* Light, not the navy band it was: the headline on the left with the arrow
   riding it, three keys underneath, and the three most recent releases
   stacked on the right over the skyline with the state ghosted behind. */

.pr-hero{
  position:relative;overflow:hidden;color:var(--ink);isolation:isolate;
  padding-top:calc(var(--hdr-h) + var(--util-h) + clamp(2.4rem,5vw,4.4rem));
  padding-bottom:clamp(2.6rem,6vw,5rem);
  background:linear-gradient(118deg,#f8faff 0%,#eef4fd 48%,#e6eefb 100%);
}
.pr-hero__wash{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 54% at 6% 4%,rgba(4,131,206,.10),transparent 62%),
    radial-gradient(42% 50% at 2% 96%,rgba(6,165,25,.08),transparent 66%);
}

/* the artwork sits in the right half and fades out towards the copy */
.pr-hero__art{
  position:absolute;z-index:0;inset:0 0 0 auto;
  width:min(62%,900px);pointer-events:none;
}
.pr-hero__sky{
  position:absolute;right:0;top:0;bottom:0;width:58%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 46%,#000 100%);
  mask-image:linear-gradient(90deg,transparent,#000 46%,#000 100%);
}
.pr-hero__sky img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.5}
.pr-hero__ghost{
  position:absolute;right:4%;top:50%;translate:0 -50%;
  width:54%;aspect-ratio:1000 / 1049;opacity:.5;
}
.pr-ghost__svg{display:block;width:100%;height:100%;overflow:visible}
.pr-ghost__svg text{display:none}
.pr-ghost__svg path{
  fill:rgba(255,255,255,.5);
  stroke:rgba(0,36,180,.10);stroke-width:1;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.pr-hero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,46%);
  column-gap:clamp(1.6rem,4vw,3.6rem);row-gap:clamp(2rem,4vw,3rem);
  align-items:center;
}
.pr-hero__copy{display:grid;gap:clamp(1.1rem,2.4vw,1.8rem);align-content:center}

/* ---- the headline ---------------------------------------------------- */
.pr-hero__h{display:grid;gap:.02em;font-family:var(--f-head);margin:0}
.pr-hero__l1,.pr-hero__l2{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.05em;
}
.pr-hero__l1{color:var(--ink)}
.pr-hero__l2{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1rem);flex-wrap:wrap}
.pr-hero__l2 em{
  font-style:normal;
  background:linear-gradient(98deg,#0060E0 0%,#0483CE 54%,#3FB0EA 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

.pr-hero__badge{
  display:inline-flex;align-items:center;flex:none;
  padding:.3em .8em .38em;border-radius:var(--r-pill);
  background:var(--pr-logo-green);color:#fff;
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1rem,1.5vw,1.65rem);line-height:1;letter-spacing:-.022em;
}

.pr-hero__p{
  margin:0;color:var(--ink-2);
  font-size:clamp(1rem,.44vw + .9rem,1.16rem);line-height:1.62;
}

/* ---- the three keys -------------------------------------------------- */
.pr-keys{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;padding:0;list-style:none;
}
.pr-key{
  display:flex;align-items:center;gap:.7rem;min-width:0;
  padding:0 clamp(.7rem,1.4vw,1.1rem);
}
.pr-key:first-child{padding-left:0}
.pr-key + .pr-key{border-left:1px solid var(--line)}
.pr-key__ic{
  display:grid;place-items:center;flex:none;
  width:clamp(42px,4vw,52px);aspect-ratio:1;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 1px 2px rgba(10,12,43,.04),0 8px 20px rgba(10,12,43,.05);
}
.pr-key__ic svg{width:48%;height:48%}
.pr-key b{
  display:grid;font-family:var(--f-head);font-weight:600;
  font-size:.95rem;line-height:1.28;letter-spacing:-.018em;color:var(--ink);
}
.pr-key b span{font-weight:400;color:var(--ink-2)}

/* ---- the stack ------------------------------------------------------- */
.pr-stack{display:grid;justify-items:stretch}
.pr-peek{
  position:relative;z-index:calc(3 - var(--i));
  margin-left:calc(var(--i) * clamp(10px,1.7vw,28px));
  margin-top:calc(var(--i) * -1 * clamp(4px,.7vw,9px));
}
.pr-peek__a{
  display:grid;grid-template-columns:clamp(104px,11vw,166px) minmax(0,1fr);
  gap:clamp(1rem,1.9vw,1.4rem);align-items:center;
  padding:clamp(.8rem,1.5vw,1.1rem);
  border-radius:clamp(14px,1.6vw,20px);
  background:#fff;border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(10,12,43,.05),0 18px 44px rgba(10,12,43,.12);
  text-decoration:none;color:inherit;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out);
}
.pr-peek__a:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(10,12,43,.05),0 26px 56px rgba(10,12,43,.18)}
.pr-peek__a:focus-visible{outline:2px solid var(--pr-orange);outline-offset:3px}
.pr-peek__fig{
  display:block;overflow:hidden;border-radius:clamp(10px,1.2vw,14px);
  aspect-ratio:4 / 3;background:var(--tint);
}
.pr-peek__fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--e-out)}
.pr-peek__a:hover .pr-peek__fig img{transform:scale(1.05)}
.pr-peek__b{display:grid;gap:.5rem;min-width:0;padding-right:.4rem}
.pr-peek__top{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.pr-peek__cat{
  padding:.3rem .7rem;border-radius:var(--r-pill);
  font-family:var(--f-body);font-weight:600;font-size:.74rem;letter-spacing:.01em;
}
.pr-peek__cat--blue{background:#E6EFFE;color:#0043B8}
.pr-peek__cat--green{background:#E4F6E7;color:#04701C}
.pr-peek__cat--gold{background:#FBF0D6;color:#8A6400}
.pr-peek__top time{font-size:.76rem;color:var(--ink-3);white-space:nowrap}
.pr-peek__t{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(.96rem,1.1vw,1.08rem);line-height:1.3;letter-spacing:-.022em;color:var(--ink);
}
.pr-peek__go{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.86rem;font-weight:600;color:var(--pr-blue,#0060E0);
}
.pr-peek__go svg{width:15px;height:15px;transition:transform .4s var(--e-out)}
.pr-peek__a:hover .pr-peek__go svg{transform:translateX(3px)}

/* 03 ── FILTER BAR ───────────────────────────────────────────────────── */

.pr-idx{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.pr-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2.4vw,2rem);flex-wrap:wrap;
  padding-bottom:clamp(1.4rem,3vw,2.2rem);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(1.8rem,3.4vw,2.8rem);
}
.pr-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.pr-chip{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1.05rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;
  font:inherit;font-size:.86rem;line-height:1;color:var(--ink-2);
  cursor:pointer;
  transition:color .3s,border-color .3s,background .3s,box-shadow .35s var(--e-out);
}
.pr-chip i{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--c);opacity:.5;
  transition:opacity .3s,transform .4s var(--e-spring);
}
.pr-chip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--c) 46%,transparent)}
.pr-chip:hover i{opacity:1}
.pr-chip:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.pr-chip.is-on{
  color:#fff;background:var(--c);border-color:var(--c);
  box-shadow:0 8px 22px color-mix(in srgb,var(--c) 30%,transparent);
}
.pr-chip.is-on i{background:#fff;opacity:1;transform:scale(1.15)}

.pr-count{
  font-family:var(--f-head);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.pr-count b{color:var(--ink);font-weight:500;font-size:.95rem}

/* 04 ── THE GRID ─────────────────────────────────────────────────────── */

.pr-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.7rem);
}
.pr-empty{
  padding:clamp(2.5rem,6vw,4rem) 0;text-align:center;
  color:var(--ink-3);font-size:1rem;
}
/* 05 ── THE CARD ─────────────────────────────────────────────────────── */

.pr-card{display:flex}
.pr-card__a{
  position:relative;display:flex;flex-direction:column;width:100%;
  overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:#fff;
  text-decoration:none;color:inherit;
  transition:border-color .4s var(--e-out),box-shadow .5s var(--e-out),translate .5s var(--e-out);
}
/* the .rv-c reveal leaves an inline transform on the card, so the lift rides
   on the independent `translate` property instead of fighting it */
.pr-card__a:hover{
  border-color:color-mix(in srgb,var(--c) 40%,transparent);
  box-shadow:0 20px 46px color-mix(in srgb,var(--c) 16%,transparent);
  translate:0 -5px;
}
.pr-card__a:focus-visible{outline:2px solid var(--c);outline-offset:3px}

/* The plate stands in for the press photograph: the category's brand colour,
   a hairline grid and the category glyph. Drop a real picture in later and it
   sits straight on top — nothing else has to change. */
.pr-card__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/10;
  background:linear-gradient(142deg,var(--c),color-mix(in srgb,var(--c) 62%,#0A0C2B) 96%);
}
.pr-card__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:calc(100% / 6) calc(100% / 4);
  mask-image:radial-gradient(70% 70% at 30% 30%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 70% at 30% 30%,#000,transparent 78%);
}
.pr-card__glyph{
  position:absolute;left:50%;top:50%;
  width:clamp(52px,7vw,74px);aspect-ratio:1;
  translate:-50% -50%;
  color:rgba(255,255,255,.94);
  transition:scale .6s var(--e-out),rotate .6s var(--e-out);
}
.pr-card__glyph svg{width:100%;height:100%}
.pr-card__a:hover .pr-card__glyph{scale:1.09}

/* the real picture the comment above promised: it sits over the plate, the
   grid and glyph stand down, and a bottom scrim keeps the number legible */
.pr-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--e-out);
}
.pr-card__media:has(.pr-card__img) .pr-card__grid,
.pr-card__media:has(.pr-card__img) .pr-card__glyph{display:none}
.pr-card__media:has(.pr-card__img)::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,43,0) 45%,rgba(10,12,43,.6) 100%);
}
.pr-card__a:hover .pr-card__img{transform:scale(1.05)}
.pr-card__n{
  position:absolute;right:clamp(.7rem,1.6vw,1.1rem);bottom:clamp(.4rem,1.2vw,.7rem);
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.05em;
  color:rgba(255,255,255,.17);
  font-variant-numeric:tabular-nums;
}

.pr-card__b{
  display:flex;flex-direction:column;gap:.62rem;
  padding:clamp(1rem,2vw,1.4rem);
  flex:1;
}
.pr-card__meta{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  font-family:var(--f-head);font-size:.68rem;letter-spacing:.09em;
  color:var(--ink-3);
}
.pr-card__cat{display:inline-flex;align-items:center;gap:.42rem;color:var(--c);white-space:nowrap}
.pr-card__cat i{width:3px;height:11px;border-radius:2px;background:var(--c);flex:0 0 auto}
.pr-card__t{
  display:block;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1rem,1.24vw,1.14rem);line-height:1.28;letter-spacing:-.026em;
  color:var(--ink);
  transition:color .3s;
}
.pr-card__a:hover .pr-card__t{color:var(--c)}
.pr-card__x{
  display:block;font-size:.88rem;line-height:1.55;color:var(--ink-3);
  /* three lines, so every card in a row ends on the same beat */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pr-card__go{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:auto;padding-top:.7rem;
  font-weight:700;font-size:.86rem;color:var(--c);
}
.pr-card__go svg{width:15px;height:15px;transition:translate .4s var(--e-out)}
.pr-card__a:hover .pr-card__go svg{translate:4px 0}

/* filtered out: taken out of the flow once the fade has run */
.pr-card[hidden]{display:none}
/* the filter measures positions, so nothing here may animate width or height */
.pr-card{will-change:auto}

/* 06 ── RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width:1000px){
  .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* squeezed into a side column the map would be ~280px across, and the
     district names — set in the artwork's own units — would come out at
     about 6px. It goes under the type instead, where it keeps its size. */
  .pr-hero__in{grid-template-columns:minmax(0,1fr)}
  .pr-hero__art{width:100%;opacity:.5}
  .pr-stack{max-width:560px}
}

@media (max-width:640px){
  .pr-grid{grid-template-columns:minmax(0,1fr)}
  /* no room for it beside the type at this width */
  .pr-hero__in{grid-template-columns:minmax(0,1fr)}
  .pr-hero__art{display:none}
  .pr-keys{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .pr-key{padding:0}
  .pr-key + .pr-key{border-left:0}
  .pr-peek{margin-left:0;margin-top:0}
  .pr-peek + .pr-peek{margin-top:.8rem}
  .pr-peek__a{grid-template-columns:84px minmax(0,1fr)}
  .pr-bar{align-items:flex-start;flex-direction:column;gap:1rem}
  .pr-chips{gap:.4rem}
  .pr-chip{font-size:.8rem;padding:.5rem .85rem}
}

/* 07 ── SINGLE RELEASE ───────────────────────────────────────────────── */
/* the detail page a card's "Read More" opens to: a breadcrumb trail, a light
   hero carrying the category colour as --c, a two-column body (the release
   plus a sticky sidebar), prev/next navigation and a related-releases strip
   in the same card style as the Posts grid. */

.pr-crumb{
  padding-top:calc(var(--hdr-h) + var(--util-h));
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.pr-crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:0;padding:.85rem 0;list-style:none;
  font-size:.82rem;color:var(--ink-3);
}
.pr-crumb li{display:flex;align-items:center;gap:.5rem;min-width:0}
.pr-crumb li:last-child span{
  display:inline-block;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:38ch;vertical-align:bottom;
}
.pr-crumb li + li::before{content:"/";color:var(--ink-4)}
.pr-crumb a{color:var(--ink-3);text-decoration:none}
.pr-crumb a:hover{color:var(--c)}
.pr-crumb [aria-current]{color:var(--ink);font-weight:600}

.pr-single__hero{
  --mx:100%;--my:0%;
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(2rem,4.4vw,3.2rem);
  padding-bottom:clamp(2rem,4.4vw,3rem);
  background:linear-gradient(118deg,#f8faff 0%,#eef4fd 48%,#e6eefb 100%);
  background-size:160% 160%;
  animation:pr-hero-drift 16s ease-in-out infinite;
}
@keyframes pr-hero-drift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.pr-single__hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 20%,transparent),transparent 62%);
  transition:background .5s var(--e-out);
}
/* a hairline grid, so the hero reads as an instrument panel rather than a
   flat gradient -- masked to fade out towards the copy */
.pr-single__grain{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,color-mix(in srgb,var(--c) 7%,transparent) 1px,transparent 1px),
    linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,transparent) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 100% at 100% 0%,#000,transparent 72%);
  mask-image:radial-gradient(60% 100% at 100% 0%,#000,transparent 72%);
}
.pr-single__hero .shell{position:relative;z-index:1}

.pr-single__back{
  display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  padding:.4rem .95rem .4rem .4rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.6);
  font-family:var(--f-body);font-weight:700;font-size:.86rem;color:var(--ink-2);
  margin-bottom:1.8rem;
  transition:background .3s var(--e-out),border-color .3s var(--e-out),
             box-shadow .3s var(--e-out),color .3s var(--e-out);
}
.pr-single__back__ic{
  display:grid;place-items:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);
  transition:background .3s var(--e-out),color .3s var(--e-out),transform .3s var(--e-out);
}
.pr-single__back__ic svg{display:block;width:12px;height:12px}
.pr-single__back:hover{
  background:#fff;color:var(--ink);
  border-color:color-mix(in srgb,var(--c) 40%,transparent);
  box-shadow:0 10px 26px -14px color-mix(in srgb,var(--c) 50%,transparent);
}
.pr-single__back:hover .pr-single__back__ic{background:var(--c);color:#fff;transform:translateX(-2px)}
.pr-single__back:focus-visible{outline:2px solid var(--c);outline-offset:2px}

.pr-single__meta{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.pr-single__meta time{font-size:.86rem;color:var(--ink-3)}
.pr-single__catbadge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.32rem .8rem .32rem .6rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--c) 11%,transparent);color:var(--c);
  font-family:var(--f-head);font-weight:700;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
}
.pr-single__catbadge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pr-single__h{
  font-family:var(--f-head);font-weight:700;color:var(--ink);
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.12;letter-spacing:-.03em;
  max-width:44ch;margin:0;
}
.pr-single__lede{
  margin:.9rem 0 0;max-width:62ch;
  color:var(--ink-2);font-size:1.05rem;line-height:1.65;
}

.pr-single__body{padding-block:clamp(2.6rem,6vw,4.4rem)}
.pr-single__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(272px,320px);
  gap:clamp(2rem,4vw,3.6rem);align-items:start;
}
.pr-single__main{min-width:0}
.pr-single__img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-lg);margin-bottom:1.6rem;
}
/* the photographs that belong to a release */
.pr-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem;
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.pr-gallery__i{
  position:relative;display:block;padding:0;border:0;cursor:zoom-in;font:inherit;overflow:hidden;border-radius:14px;aspect-ratio:4/3;background:#E7EBF6;
  box-shadow:0 1px 2px rgba(6,16,52,.06),0 12px 28px rgba(6,16,52,.1);
}
.pr-gallery__i img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out)}
.pr-gallery__i:hover img,.pr-gallery__i:focus-visible img{transform:scale(1.05)}
.pr-gallery__i:focus-visible{outline:2px solid var(--c,#2d308f);outline-offset:3px}
.pr-single__caption{
  margin:-1rem 0 1.6rem;font-size:.86rem;font-style:italic;color:var(--ink-3);line-height:1.5;
}
.pr-single__content{
  font-family:var(--f-body);font-size:1.08rem;line-height:1.75;color:var(--ink-2);
}
.pr-single__content p{margin:0 0 1.2em}
.pr-single__content p:last-child{margin-bottom:0}

/* ---- prev / next ------------------------------------------------------ */
.pr-adjacent{
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;
  margin-top:clamp(2.6rem,5vw,3.6rem);padding-top:clamp(2rem,4vw,2.6rem);
  border-top:1px solid var(--line);
}
.pr-adjacent__a{
  display:flex;gap:1rem;align-items:center;min-width:0;
  padding:1rem;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  text-decoration:none;color:inherit;
  transition:border-color .3s,box-shadow .3s,translate .3s;
}
.pr-adjacent__a:hover{
  border-color:color-mix(in srgb,var(--c) 40%,transparent);
  box-shadow:0 14px 30px color-mix(in srgb,var(--c) 12%,transparent);
  translate:0 -2px;
}
.pr-adjacent__a--next{flex-direction:row-reverse;text-align:right}
.pr-adjacent__fig{
  flex:0 0 auto;width:104px;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--paper-2);
}
.pr-adjacent__fig img{width:100%;height:100%;object-fit:cover;display:block}
.pr-adjacent__b{display:grid;gap:.25rem;min-width:0}
.pr-adjacent__k{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-head);font-size:.72rem;font-weight:700;letter-spacing:.03em;
  color:var(--c);
}
.pr-adjacent__k svg{width:12px;height:12px;flex:0 0 auto}
.pr-adjacent__a--next .pr-adjacent__k{justify-content:flex-end}
.pr-adjacent__b time{font-size:.76rem;color:var(--ink-3)}
.pr-adjacent__t{
  font-family:var(--f-head);font-weight:600;font-size:.9rem;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- sidebar ------------------------------------------------------------ */
.pr-side{
  display:grid;gap:1.3rem;align-content:start;
  position:sticky;top:calc(var(--hdr-h) + var(--util-h) + 1.4rem);
}
.pr-side__card{
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:1.3rem 1.4rem 1.4rem;
  box-shadow:0 1px 2px rgba(10,12,43,.03),0 14px 34px rgba(10,12,43,.05);
}
.pr-side__h{
  display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-family:var(--f-head);font-weight:700;font-size:.94rem;letter-spacing:-.01em;color:var(--ink);
}
.pr-side__h::before{content:"";width:3px;height:1rem;border-radius:2px;background:var(--c)}

.pr-side__cats{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.pr-side__catlink{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.62rem .7rem;border-radius:var(--r);
  color:var(--ink-2);text-decoration:none;font-size:.88rem;
  transition:background .25s,color .25s;
}
.pr-side__catname{display:inline-flex;align-items:center;gap:.6rem;min-width:0}
.pr-side__catname i{width:7px;height:7px;border-radius:50%;background:var(--ink-4);flex:0 0 auto}
.pr-side__catlink:hover{background:var(--paper-2);color:var(--ink)}
.pr-side__catgo{width:14px;height:14px;flex:0 0 auto;opacity:0;translate:-3px 0;transition:opacity .25s,translate .25s}
.pr-side__catlink:hover .pr-side__catgo,
.pr-side__catlink.is-on .pr-side__catgo{opacity:1;translate:0 0}
.pr-side__catlink.is-on{background:color-mix(in srgb,var(--c) 11%,transparent);color:var(--c);font-weight:600}
.pr-side__catlink.is-on .pr-side__catname i{background:var(--c)}

.pr-share{display:flex;gap:.6rem}
.pr-share__btn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);
  transition:background .25s,color .25s,transform .25s,border-color .25s;
  cursor:pointer;
}
.pr-share__btn svg{width:17px;height:17px}
.pr-share__btn:hover{background:var(--c);border-color:var(--c);color:#fff;transform:translateY(-2px)}
.pr-share__copy{position:relative}
.pr-share__copy[data-copied="true"]::after{
  content:"Copied!";position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 0;
  padding:.3rem .6rem;border-radius:var(--r);background:var(--pr-ink);color:#fff;
  font-size:.72rem;white-space:nowrap;font-family:var(--f-body);
}

/* ---- related ------------------------------------------------------------ */
.pr-related{
  padding-block:clamp(2.8rem,6vw,4.6rem);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  border-top:1px solid var(--line);
}
.pr-related__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:clamp(1.6rem,3vw,2.2rem);
}
.pr-related__h{
  margin:0;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em;color:var(--ink);
}
.pr-related__all{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-weight:700;font-size:.9rem;color:var(--pr-indigo);text-decoration:none;
}
.pr-related__all svg{width:15px;height:15px;transition:translate .3s}
.pr-related__all:hover svg{translate:4px 0}

@media (max-width:960px){
  .pr-single__grid{grid-template-columns:minmax(0,1fr)}
  .pr-side{position:static;order:2;margin-top:.4rem}
  .pr-single__main{order:1}
}

@media (max-width:640px){
  .pr-adjacent{grid-template-columns:1fr}
  .pr-adjacent__a--next{flex-direction:row;text-align:left}
  .pr-adjacent__a--next .pr-adjacent__k{justify-content:flex-start}
  .pr-crumb li:last-child span{max-width:20ch}
}

html.no-motion .pr-card__a{transition:none}
html.no-motion .pr-single__hero{animation:none}
@media (prefers-reduced-motion:reduce){
  .pr-single__hero{animation:none}
}