@charset "UTF-8";
/* ==========================================================================
   Pakdis — news & events archive
   --------------------------------------------------------------------------
   A standalone sheet for news.html. It introduces no colour, font, radius or
   easing of its own — everything resolves to the tokens in css/style.css, and
   the header, footer, .plate, .gallery, .card, .section-head and .link-arrow
   components are used exactly as that sheet defines them.

   The one thing this page adds that no other page has is the calendar, and
   the brief for it was specific: draw it in the pattern's own line style.
   So it is built entirely from strokes — no filled cells, no solid buttons.
   Thin rules, one rounded corner per cell echoing the pattern's quarter-arcs,
   and the pattern's four-dot cluster marking the days that carry an event.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Calendar hero
   The whole opening: a graded purple band carrying the identity's pattern
   across its full width, and on top of it a month grid built from that same
   artwork's modules.

   The pattern is the sheet itself, not the narrow corner strip this page
   started with. That strip failed for a specific reason worth keeping in
   mind: it ran up the left edge straight under the navigation, so its line
   work crossed the menu labels. The full-bleed version is masked away
   entirely across the top before the nav reaches it.
   -------------------------------------------------------------------------- */
/* The opening section also carries `page-hero`, deliberately with no rule of
   its own: js/app.js keys the sticky header off `.hero, .page-hero`, so the
   class is a behaviour hook, not a style. Don't "clean it up". */

.pk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.calhero {
  position: relative;
  overflow: hidden;
  padding-block: var(--hero-top) 72px;
  /* Not a flat fill. The stops are the ones .plate already ramps through in
     css/style.css, so the band gets depth without introducing a purple the
     system doesn't own — lighter where the headline sits, deeper towards the
     foot where it hands over to the white archive below. */
  background: var(--purple-flood);     /* fallback for no color-mix */
  background: linear-gradient(163deg,
    color-mix(in srgb, var(--purple-flood) 86%, #fff) 0%,
    var(--purple-flood) 38%,
    #3b256b 74%,
    #321e60 100%);
  isolation: isolate;
}


.calhero__glow {
  position: absolute;
  inset-inline-end: -200px;
  top: -240px;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(187, 167, 96, .3) 0%, rgba(187, 167, 96, 0) 70%);
  pointer-events: none;
}

/* A second, cooler light at the opposite corner. One glow lit a single corner
   and left the rest reading as dead colour; two give the band an axis. */
.calhero__glow--b {
  inset-inline-end: auto;
  inset-inline-start: -260px;
  top: auto;
  bottom: -300px;
  width: 720px;
  height: 720px;
  /* White, not a new hue — it lifts the purple that is already there
     instead of adding a second colour to the palette. */
  background: radial-gradient(circle, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, 0) 68%);
}

/* -- the pattern ---------------------------------------------------------- */
/* The real asset, full bleed. `cover` on a 4955×1254 sheet in a band this
   size renders it at roughly its own scale, so the motifs read at the size
   they were drawn at rather than as shrunken noise.

   .11 against .plate's .2 because this band already carries a calendar made
   of line work: at the plate's strength the two fields of strokes started
   arguing with each other. The vertical mask is the load-bearing part — the
   earlier corner strip failed because its line work ran straight through the
   menu labels, so the pattern is faded out entirely across the top before the
   navigation reaches it, and again at the foot. */
.calhero__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: .085;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 68%, transparent 96%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 68%, transparent 96%);
}

.calhero .container { position: relative; z-index: 1; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .7);
}
.breadcrumb a { color: rgba(255, 255, 255, .7); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: #fff; }
.breadcrumb__sep {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  rotate: 180deg;                      /* RTL: chevron points start-ward */
}



/* The gold accent leads the title in from the start edge rather than sitting
   under it: vertical, it costs no height at all, and it points into the text
   the way the identity's own rules do. */
/* -- the calendar panel --------------------------------------------------- */
/* The grid was sitting on bare purple while the day panel beside it had a
   frame — one object looked designed and the other looked unfinished. The
   month bar, the weekday row and the grid now share a single panel, so they
   read as one instrument rather than three stacked things. */
.cal-col {
  position: relative;
  min-width: 0;
  padding: 20px 24px 18px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 20px 20px 52px 20px;
  /* Glass, but glass you can read through *at* rather than through. The
     illusion comes from three things, and transparency is deliberately not
     one of them:

     1. A 30px backdrop blur. The pattern behind is thin line work; at this
        radius it collapses into a smooth wash with no legible strokes, so it
        can never compete with the grid drawn on top. The blur is what does
        the separating — not the fill.
     2. A *light* frost, not a dark one. Filling with --purple-deep at half
        opacity made a solid purple plate: the panel stopped being glass and
        became another sheet of the same colour. White at 13% falling to 8.5%
        lifts the band instead of covering it — measured, 1.46:1 against the
        band at the head and 1.28:1 at the foot, so it still separates along
        its whole height while reading as something light passes through.
     3. A specular rim on the top edge, a hairline inner ring and a long drop
        shadow: an edge, a thickness and a lift.

     No new colour enters the palette — the frost is white and the ground is
     the band's own purple showing through it. */
  background: linear-gradient(180deg,
    rgb(255 255 255 / .13) 0%,
    rgb(255 255 255 / .085) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(1.35);
          backdrop-filter: blur(30px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .34),
    inset 0 0 0 1px rgb(255 255 255 / .07),
    0 40px 80px -34px rgb(11 5 32 / .8);
}

/* Two gold elbows on opposite corners — the brand bracket reduced to a corner
   mark, the same move the article's lead photo uses. Physical properties, not
   logical: they are pinned to the two corners the radius shorthand shapes,
   and that shorthand is physical too. */
.cal-col::before,
.cal-col::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border: 0 solid rgb(187 167 96 / .55);
  pointer-events: none;
}
.cal-col::before {
  top: -1px;
  right: -1px;
  border-top-width: 1.6px;
  border-right-width: 1.6px;
  border-top-right-radius: 20px;
}
.cal-col::after {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 1.6px;
  border-left-width: 1.6px;
  border-bottom-left-radius: 20px;
}

.cal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  /* Gold, fading out towards the far edge — a rule with a direction rather
     than a border drawn across a box. */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to left, rgb(187 167 96 / .55), rgb(187 167 96 / .05)) 1;
}

.cal-ctrls { display: flex; align-items: center; gap: 8px; }

.cal-month {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.cal-month b { font-weight: 400; color: var(--gold); }

/* Outlined, never filled — a solid button would be the only solid object in
   a composition made entirely of strokes. */
.cal-step {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: rgba(255, 255, 255, .82);
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.cal-step svg {
  width: 10px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cal-step:hover { border-color: rgb(187 167 96 / .8); background: rgb(187 167 96 / .12); color: var(--gold); }

.cal-today {
  margin-inline-end: 6px;
  padding: 10px 18px;
  border: 1px solid rgb(187 167 96 / .55);
  border-radius: 999px 999px 999px 8px;   /* the identity's one broken corner */
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold);
  transition: background-color .25s var(--ease);
}
.cal-today:hover { background: rgb(187 167 96 / .16); }

/* --------------------------------------------------------------------------
   1. The grid
   -------------------------------------------------------------------------- */
.calhero__body {
  display: grid;
  /* The calendar must be fully visible on load, so the cell is derived from
     the height it is allowed to occupy and the panel is sized from the cell —
     not the other way round.

     526px is everything the grid is not: the fixed header, the page head, the
     panel's own padding and border, the month bar, the weekday row, the grid's
     five 10px row gaps and the section's closing padding, all measured off
     this layout. Whatever height is left divides by six rows.

     96px caps it, because past that the numeral and the motif start floating
     in an empty tile; 71px floors it, because below that the numeral stops
     being readable and a calendar you have to scroll beats one you can't read.

     The column is then the frame's true outer width — seven cells, six 10px
     gaps, 48px of panel padding and 2px of border — so the panel beside it
     takes the genuine remainder with no dead strip between them. */
  /* Row height and cell width are set independently. Tying them together
     with aspect-ratio:1 meant a short window could only fit six square rows
     by shrinking the width too, and the floor that keeps numerals readable
     then pushed the last rows past the fold. A calendar cell does not have to
     be square — printed months are set wider than tall — so the width is held
     at a comfortable 88px and only the height gives way.

     445px is everything the six rows are not: header, page head, the panel's
     padding and border, the month bar, the weekday row, the five row gaps and
     the section's closing padding. */
  --cell-h: clamp(54px, calc((100vh - 353px) / 6), 96px);
  /* The calendar takes the larger share — it is what the page is for. The
     panel carries a floor rather than a plain 1fr so it can never be squeezed
     to nothing on a narrow container; the calendar's own minmax lets *it*
     give way instead, which is the right order of sacrifice. */
  grid-template-columns: minmax(0, 860px) minmax(340px, 1fr);
  gap: 40px;
  /* Stretch, not start. The panel used to stop wherever its four items ran
     out, leaving a third of the column empty beside a full-height calendar —
     two objects that plainly belonged together but didn't line up. */
  align-items: stretch;
}

.cal__dows {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.cal__dow {
  padding-bottom: 4px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  /* The brand gold measures 2.8:1 on the frosted panel — well under the bar
     for 12.5px type. Lightened 35% towards white it reaches 4.6:1 and keeps
     the hue. Same derivation as the event numeral, and as the darkened golds
     the article page uses in the other direction on white. */
  color: color-mix(in srgb, var(--gold) 65%, #fff);
  white-space: nowrap;
}
.cal__dow i { display: none; font-style: normal; }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: var(--cell-h);
  gap: 10px;
}

/* The module. One corner is a quarter-arc and the orientation rotates every
   cell, so the arcs stagger across the field instead of lining up — that
   stagger is what makes a calendar read as this pattern rather than as a
   table. 46% rather than 50% keeps a hair of straight edge either side of the
   arc, which is how the artwork draws it. */
.cal__cell {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 0;
  /* A whisper of fill. With pure outlines the field read as a wireframe; the
     faintest ground turns each module into a tile without adding a colour. */
  background: rgba(255, 255, 255, .05);
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease), transform .3s var(--ease);
}
.cal__cell:nth-child(4n+1) { border-start-start-radius: 46%; }
.cal__cell:nth-child(4n+2) { border-start-end-radius: 46%; }
.cal__cell:nth-child(4n+3) { border-end-end-radius: 46%; }
.cal__cell:nth-child(4n+4) { border-end-start-radius: 46%; }

/* The motif layer. Every cell carries one; the day cells keep it faint behind
   the numeral, the out-of-month cells have nothing else, so there it *is* the
   cell. */
.cal__art {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Faint on a day cell — the numeral has to win. The out-of-month cells
     take it back up, because there the motif is the only thing in the box. */
  opacity: .085;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}

.cal__num {
  position: relative;
  z-index: 1;
  font-size: clamp(16px, 1.4vw, 21px);
  /* 700, not 600. Modam ships 300/400/500/700/900 and nothing between, so a
     600 request was already being resolved up to 700 in the brand font while
     the fallback faces synthesised something of their own — the weight was
     inconsistent rather than light. Stating a weight the family actually has
     makes it render the same everywhere. */
  font-weight: 700;
  line-height: 1;
  color: #fff;
  /* The motif sits behind the numeral, so the numeral gets a little ground
     of its own — enough to separate the two, not enough to read as a shadow. */
  text-shadow: 0 1px 6px rgba(26, 13, 62, .55);
  transition: color .3s var(--ease);
}

/* Out-of-month days are not emptied — they are given back to the pattern.
   Blanking them would tear a hole in the field, and the field is the point. */
.cal__cell--void { border-color: rgba(255, 255, 255, .13); background: none; }
.cal__cell--void .cal__art { opacity: .34; }

/* A day that carries an event. The cluster is drawn full size and in gold —
   in the artwork gold appears nowhere else, so it needs no legend. */
/* Gold edge plus a gold light held inside the tile — the glow is what makes
   a marked day read across the field before any numeral is read. */
.cal__cell--event {
  border-color: rgb(187 167 96 / .8);
  background: rgb(187 167 96 / .14);
  box-shadow: inset 0 0 26px rgb(187 167 96 / .2);
  cursor: pointer;
}
/* The marked days step up to the next real weight so they still separate from
   a 700 field. The numeral is the brand gold lightened for a dark ground —
   plain --gold measures 4.47:1 on the event tile, which is under the bar for
   a numeral this size; lightened it reaches 7.6:1. Same derivation as the
   darkened golds the article page uses on white, in the other direction. */
.cal__cell--event .cal__num { color: #e7d9a4; font-weight: 900; }
.cal__cell--event .cal__art {
  inset: auto 11% 10% auto;
  width: 34%;
  height: 34%;
  fill: color-mix(in srgb, var(--gold) 55%, #fff);
  stroke: none;
  opacity: 1;
}
.cal__cell--event:hover {
  border-color: var(--gold);
  background: rgb(187 167 96 / .12);
  transform: translateY(-3px);
}

/* Today wears the four-pointed star — the shape the artwork puts where four
   arcs meet, i.e. its own marker for a junction. */
.cal__cell--today { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.cal__cell--today .cal__num { color: #fff; font-weight: 900; }

.cal__cell--picked {
  border-color: var(--gold);
  border-width: 1.6px;
  background: rgb(187 167 96 / .22);
  box-shadow: inset 0 0 28px rgb(187 167 96 / .26), 0 12px 30px -14px rgb(26 13 62 / .9);
}
.cal__cell--picked .cal__num { color: #fff; font-weight: 900; }

/* --------------------------------------------------------------------------
   2. Day panel
   Never empty: with no day picked it lists the month, so the column always
   earns its width and the calendar always has an answer beside it.
   -------------------------------------------------------------------------- */
.daypanel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px 20px 52px 20px;    /* matches the calendar panel exactly */
  /* The same sheet of glass — two columns of one instrument. */
  /* A shade dimmer than the calendar and with a softer lift: two panels at
     identical weight flattened the composition, and the calendar is the thing
     the page is about. */
  background: linear-gradient(180deg,
    rgb(255 255 255 / .1) 0%,
    rgb(255 255 255 / .06) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .22),
    inset 0 0 0 1px rgb(255 255 255 / .04),
    0 28px 56px -28px rgb(11 5 32 / .55);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
          backdrop-filter: blur(30px) saturate(1.3);
}

/* The pattern's own dot cluster, blown up and held at the panel's far corner
   as a watermark. It is the one place on this page the motif is allowed to be
   purely decorative, because nothing else occupies that corner. */
.daypanel::after {
  content: "";
  position: absolute;
  bottom: -26px;
  left: -26px;
  width: 150px;
  height: 150px;
  background:
    radial-gradient(circle 11px at 38px 38px,  rgb(187 167 96 / .5) 99%, transparent 100%),
    radial-gradient(circle 11px at 100px 38px, rgb(187 167 96 / .5) 99%, transparent 100%),
    radial-gradient(circle 11px at 38px 100px, rgb(187 167 96 / .5) 99%, transparent 100%),
    radial-gradient(circle 11px at 100px 100px,rgb(187 167 96 / .5) 99%, transparent 100%);
  opacity: .18;
  pointer-events: none;
}

.daypanel__head,
.daypanel__list,
.daypanel__empty,
.daypanel__clear { position: relative; z-index: 1; }

.daypanel__head {
  padding-bottom: 13px;
  margin-bottom: 14px;
  /* The same directional gold rule the month bar uses, so the two heads are
     punctuated the same way. */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to left, rgb(187 167 96 / .5), rgb(187 167 96 / .04)) 1;
}
.daypanel__kicker {
  font-size: 12px;
  font-weight: 400;
  color: var(--gold);
}
.daypanel__title {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}

.daypanel__list { display: flex; flex-direction: column; gap: 7px; }

/* Compact on purpose: this is a scan list sitting beside the calendar, not
   the archive of cards below. Card-sized rows here made four events look
   like the whole page. */
/* A date block on the reading edge, then the text. Scanning a day list means
   scanning dates first, and they were previously buried mid-line next to the
   category. */
.dayitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px 10px 26px 10px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.dayitem:hover {
  border-color: rgb(187 167 96 / .7);
  background: rgb(187 167 96 / .1);
  transform: translateX(4px);           /* RTL: nudges start-ward */
}

.dayitem__date {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  padding: 6px 2px 5px;
  border: 1px solid rgb(187 167 96 / .35);
  border-radius: 10px 10px 10px 3px;    /* the identity's one broken corner */
  background: rgb(187 167 96 / .1);
  text-align: center;
  line-height: 1.1;
}
.dayitem__date b { font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--gold) 60%, #fff); }
.dayitem__date i { font-size: 9.5px; font-style: normal; font-weight: 300; color: rgba(255, 255, 255, .6); }

.dayitem__body { min-width: 0; }
.dayitem__cat {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: color-mix(in srgb, var(--gold) 65%, #fff);
}
.dayitem__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
}

.daypanel__empty {
  padding: 26px 4px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(255, 255, 255, .55);
}

/* margin-top:auto pins this to the base of the stretched column. */
.daypanel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.daypanel__count {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .55);
}
.daypanel__all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--gold) 70%, #fff);
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.daypanel__all svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.daypanel__all:hover { color: #fff; gap: 11px; }

.daypanel__clear {
  margin-top: 14px;
  padding-top: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--gold) 70%, #fff);
}
.daypanel__clear:hover { color: #fff; }

/* --------------------------------------------------------------------------
   2. Archive band
   -------------------------------------------------------------------------- */
.archive {
  padding-block: 96px 112px;
  background: linear-gradient(180deg, #f7f7f9 0%, #fbfbfb 16%, #fdfdfd 32%, #fefefe 48%, #fefefe 100%);
}

.toolbar-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  margin-bottom: 40px;
  border-block: 1px solid #ece8f2;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}

.toolbar__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.toolbar__end { display: flex; align-items: center; gap: 16px; flex: none; }

.toolbar__count {
  font-size: 14px;
  font-weight: 400;
  color: var(--grey-600);
  white-space: nowrap;
}

.chip {
  padding: 9px 20px;
  border: 1.4px solid #e6e1ee;
  border-radius: 999px 999px 999px 6px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--purple);
  white-space: nowrap;
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.chip:hover { border-color: var(--gold); transform: translateY(-2px); }
/* Purple on gold, not white: white on #baa660 measures 2.4:1, the brand
   purple 4.6:1. */
.chip.is-active { border-color: var(--gold); background: var(--gold); color: var(--purple); }
.chip:active { transform: translateY(0) scale(.97); }

/* -- toolbar search ------------------------------------------------------- */
/* Lifted from css/articles.css unchanged: the two archives filter the same
   way, so they should not offer two different-looking fields to do it. Height
   is matched to the chips and the view switch beside it so the whole bar
   shares one optical baseline. */
.tool-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 262px;
  padding-inline: 16px 6px;
  border: 1.4px solid #e6e1ee;
  border-radius: 999px;
  background: #fff;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tool-search:hover { border-color: #d6cde4; }
.tool-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(187 167 96 / .18); }

.tool-search__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-search__input {
  flex: 1;
  min-width: 0;
  padding-block: 11px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink);
}
.tool-search__input::placeholder { color: var(--grey-400); font-weight: 300; }
/* The ring on the wrapper is the pointer focus indicator, so the native
   rectangle inside a pill is dropped — but a real outline comes back for
   keyboard focus, offset clear of the field and given the pill's radius. */
.tool-search__input:focus { outline: none; }
.tool-search__input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
  border-radius: 999px;
}
.tool-search__input::-webkit-search-cancel-button { display: none; }

.tool-search__clear {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--grey-400);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tool-search__clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.tool-search__clear:hover { background: #f4f1f8; color: var(--purple); }

/* The page's only <h1> is the calendar heading; this is for the search field's
   label, which the magnifier carries visually but which still needs a name. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.viewswitch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1.4px solid #e6e1ee;
  border-radius: 12px;
  background: #fff;
}
.viewswitch__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border-radius: 8px;
  color: var(--grey-400);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.viewswitch__btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.viewswitch__btn:hover { color: var(--purple); background: #f5f2f9; }
.viewswitch__btn.is-active { background: var(--purple); color: #fff; }

/* -- the two labels the archive adds to a card ---------------------------- */
/* Both sit in the photo's top band, where the card's wash gradient is still
   at zero alpha, so they never fight the tint that builds towards the panel.
   z-index clears .card__media::after, which paints last as a generated child. */
.card__tag,
.card__day {
  position: absolute;
  z-index: 1;
  top: 14px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.card__tag {
  inset-inline-start: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--purple);
}

/* A torn-off calendar leaf: day over month. On an events archive the date is
   the thing being scanned for, so it is set as a block rather than buried in
   the meta line — which still carries the full date for anyone reading it. */
.card__day {
  inset-inline-end: 14px;
  display: grid;
  place-items: center;
  width: 46px;
  padding: 6px 4px 5px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px 10px 10px 3px;
  background: rgba(17, 7, 53, .42);
  text-align: center;
  color: #fff;
}
.card__day b { font-size: 17px; font-weight: 700; line-height: 1.15; }
.card__day i { font-size: 10.5px; font-style: normal; font-weight: 300; opacity: .85; }

/* Fallback tint alternation for the no-JS case. Once js/news.js takes over it
   marks the grid `is-enhanced` and re-alternates the *visible* cards instead,
   so a filtered row never shows two golds running — scoping this to
   :not(.is-enhanced) is what keeps the two from fighting. */
.archive__grid:not(.is-enhanced) > .card:nth-child(even) {
  --tint: 187 167 96;
  --card-accent: var(--gold);
}

.archive__grid { row-gap: 34px; }

.archive__empty {
  padding: 72px 24px;
  border: 1.4px dashed #e2dcec;
  border-radius: 14px 14px 32px 14px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: var(--grey-600);
}

/* -- pager ---------------------------------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 72px;
}
.pager__num,
.pager__step {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border: 1.4px solid #e6e1ee;
  border-radius: 12px 12px 12px 4px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--purple);
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.pager__num:hover,
.pager__step:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.pager__num.is-active { border-color: var(--gold); background: var(--gold); color: var(--purple); }
.pager__num.is-active:hover { transform: none; color: var(--purple); }
.pager__step svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pager__step.is-disabled { opacity: .38; pointer-events: none; }
.pager__gap { min-width: 24px; text-align: center; color: var(--grey-400); }

/* --------------------------------------------------------------------------
   3. List view
   The same .card markup re-laid as a horizontal row: only the four boxes that
   were absolutely positioned for the vertical card are given horizontal
   insets instead, so the tint, the wash, the notch and the line-clamps all
   still apply. Behind min-width so the 620px layout never enters it — at
   phone widths a 300px media column leaves the text no measure.
   -------------------------------------------------------------------------- */
@media (min-width: 621px) {
  .archive__grid.is-list { grid-template-columns: 1fr; gap: 20px; }

  .is-list .card__link { height: 224px; }

  /* inset-inline-start is the right edge on this RTL page, so the photo keeps
     the reading-start position it has in the grid view. */
  .is-list .card__media { inset-inline-start: 0; inset-inline-end: auto; width: 312px; }
  .is-list .card__media img { object-position: 50% 42%; }
  .is-list .card__media::after {
    background: linear-gradient(to left, rgb(var(--tint) / 0) 40%, rgb(var(--tint) / .96) 96%);
  }

  /* The notch stays exactly where the base rule puts it — on the panel's top
     edge — so the drip reads identically in both views without an override. */
  .is-list .card__panel {
    inset-inline: 328px 14px;
    top: 14px;
    bottom: 14px;
    height: auto;
    padding: 12px 26px 18px;
    border-radius: 10px 10px 29.6px 10px;
  }

  .is-list .card__meta    { font-size: 15.4px; }
  .is-list .card__title   { margin-top: 10px; font-size: 20px; line-height: 1.5; }
  .is-list .card__excerpt { margin-top: 12px; font-size: 13.6px; line-height: 1.75; }
}

/* --------------------------------------------------------------------------
   4. Responsive
   Same breakpoints as style.css — no new ones introduced.
   -------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  .calhero__body { grid-template-columns: minmax(0, 780px) minmax(320px, 1fr); gap: 36px; }
}

@media (max-width: 1200px) {
  .calhero__body { grid-template-columns: minmax(0, 660px) minmax(300px, 1fr); gap: 28px; }
  .cal__grid, .cal__dows { gap: 8px; }

  /* style.css drops the 4th card here so the home page's 4-up row reflows to
     a clean 3-up. This is a real listing — every item has to survive the
     breakpoint — so that rule is undone for this grid only. */
  .archive__grid > .card:last-child { display: block; }

  .toolbar { flex-wrap: wrap; }
  .toolbar__filters { width: 100%; }
  .toolbar__end { margin-inline-start: auto; }
  .tool-search { width: 236px; }

  .is-list .card__media { width: 250px; }
  .is-list .card__panel { inset-inline: 266px 14px; }
}

@media (max-width: 1024px) {
  /* Matches the home hero's pattern at this breakpoint (style.css ≤1024:
     170px / .55) so every page reads as one system. */
  .calhero { padding-block: var(--hero-top) 72px; }
  /* The band is taller and narrower once the column stacks, so the sheet is
     cropped much harder; easing the mask keeps some pattern in the middle
     rather than fading it out from both ends at once. */
  .calhero__pattern { opacity: .1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%); }
  /* `cover` sizes off whichever axis the box exceeds relative to the sheet's
     own 3.95:1 strip. Stacked, the band is tall and narrow against a wide
     short image, so it's the HEIGHT that decides the scale — and that height
     barely shrank from desktop, so the sheet kept rendering at close to its
     desktop size while the screen around it shrank by half. Scaling the
     already-covering image down from the same point `object-position`
     crops around keeps the crop centred and brings it back to the same .62
     reduction every other pattern on the site gets at this width. */
  .calhero__pattern { transform: scale(.62); transform-origin: 50% 42%; }

  /* Stacked. The calendar keeps a cap rather than running the full width:
     seven columns across a 900px column would give 120px cells, which is a
     wall-planner, not a date picker. Centred so it doesn't sit off-axis
     under a full-width paragraph. */
  /* Stacked: the month keeps the full column and the day panel drops beneath
     it, which is also the order the two are used in. */
  /* Stacked: the month keeps the column but stays capped, so the cells hold
     near their desktop size instead of ballooning across a tablet's width. */
  .calhero__body { grid-template-columns: 1fr; gap: 34px; }
  /* Stacked, the row height no longer has to buy the whole page's fit, so
     the cells go back to roughly square. */
  .cal-col { width: min(100%, 620px); margin-inline: auto; }
  .calhero__body { --cell-h: clamp(58px, 11vw, 82px); }

  .archive { padding-block: 72px 84px; }
  .pager { margin-top: 56px; }

  /* Touch sizing starts here, not at the phone breakpoint: 1024 is where the
     nav becomes a burger, i.e. where this site is driven by a finger rather
     than a cursor. Only the boxes grow — glyphs and type stay put. */
  .chip { padding-block: 11px; }
  .viewswitch { padding: 3px; }
  .viewswitch__btn { width: 44px; height: 44px; }
  .cal-step { width: 46px; height: 46px; }
  .tool-search__clear { width: 38px; height: 38px; }


  .is-list .card__link { height: 200px; }
  .is-list .card__media { width: 210px; }
  .is-list .card__panel { inset-inline: 224px 12px; padding: 10px 20px 16px; }
  .is-list .card__title { font-size: 17px; }
}

@media (max-width: 620px) {
  /* Same pattern size as the home hero on mobile (style.css ≤620: 100px / .4). */
  .calhero { padding-block: var(--hero-top) 52px; }
  /* Same overshoot, worse: the column is narrower still but the band's
     height barely changes, so cover's height-driven scale stays almost
     exactly what it was at 1024px. Matches the phone-width .4 used
     everywhere else the site scales this sheet down. */
  .calhero__pattern { opacity: .085; transform: scale(.4); transform-origin: 50% 42%; }

  .breadcrumb { font-size: 13px; gap: 6px; }
  .calhero__body { gap: 26px; }

  .cal__grid, .cal__dows { gap: 5px; }
  .calhero__body { --cell-h: clamp(42px, 12.5vw, 56px); }
  /* "چهارشنبه" cannot sit in a 42px cell, so the letters take over. */
  .cal__dow b { display: none; }
  .cal__dow i { display: inline; }
  .cal__dow { font-size: 11.5px; }
  /* The arc gets shallower as the cell shrinks: a 46% radius on a 42px cell
     eats the numeral's own space and the day stops being readable, which is
     the one thing the pattern must not cost. */
  .cal__cell:nth-child(4n+1) { border-start-start-radius: 34%; }
  .cal__cell:nth-child(4n+2) { border-start-end-radius: 34%; }
  .cal__cell:nth-child(4n+3) { border-end-end-radius: 34%; }
  .cal__cell:nth-child(4n+4) { border-end-start-radius: 34%; }
  /* The motif is smaller than the numeral at this size and only muddies it —
     the gold stroke and numeral carry the event day on their own. */
  .cal__cell .cal__art { display: none; }
  .cal__cell--void .cal__art { display: block; opacity: .24; inset: 24%; width: 52%; height: 52%; }
  .cal__cell--event .cal__art { display: block; inset: auto 8% 7% auto; width: 26%; height: 26%; }

  .daypanel { padding: 20px 18px 18px; border-radius: 14px 14px 34px 14px; }
  .daypanel__title { font-size: 17px; }
  .cal-col { padding: 18px 15px 16px; border-radius: 16px 16px 38px 16px; }
  .cal-col::before, .cal-col::after { width: 38px; height: 38px; }
  .cal-bar { flex-wrap: wrap; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; }
  .cal-month { font-size: 17px; }
  .cal-today { padding: 11px 14px; font-size: 12.5px; }

  .archive { padding-block: 52px 64px; }

  /* Sticky is dropped on phones. Stacked, this bar runs ~150px tall; parked
     under a 96px header it would hold a third of a typical phone viewport
     permanently, leaving barely two card-heights of list. */
  .toolbar-bar { position: static; margin-bottom: 24px; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 12px; }
  /* Wrapping, not a sideways scroll strip: with five Persian labels the last
     one lands half-cut against the edge and reads as broken, and options you
     can't see don't get used. */
  .toolbar__filters { width: auto; flex-wrap: wrap; gap: 8px; }
  .chip { padding: 11px 10px; font-size: 13px; }

  /* The list layout is gated behind min-width: 621px, so at phone widths both
     views render identically. A switch that visibly does nothing is worse
     than no switch. */
  .viewswitch { display: none; }
  .toolbar__end { margin-inline-start: 0; flex-wrap: wrap; gap: 10px 12px; }
  /* The field takes the row and pushes the count onto the next one, which is
     the right priority order on a phone. */
  .tool-search { width: 100%; order: -1; }
  /* 16px is the threshold below which iOS Safari auto-zooms a focused field —
     the one size here that is not a visual choice. */
  .tool-search__input { font-size: 16px; padding-block: 10px; }
  .toolbar__count { margin-inline-end: auto; }

  .archive__grid { row-gap: 24px; }
  .archive__empty { padding: 48px 18px; font-size: 15px; }

  .pager { margin-top: 44px; gap: 6px; }
  .pager__num,
  .pager__step { min-width: 44px; height: 44px; padding-inline: 8px; font-size: 14px; }
}

/* .site-footer__inner is markup this page shares with the others but which
   style.css never gives a layout — the footer there relies on its children's
   own margins. Stated so the row is explicit rather than incidental. */
.site-footer__inner { display: block; }

/* --------------------------------------------------------------------------
   5. Filtered-out cards
   Last in the sheet on purpose. `[hidden]` is how js/news.js takes a card out
   of the list, and the `display: block` restoration above sits at the same
   specificity — so this has to come after it, or a filtered card would
   reappear at exactly the widths that rule covers.
   -------------------------------------------------------------------------- */
.archive__grid > .card[hidden] { display: none; }