/* ═══ volanote.com — the interior pages ════════════════════════════════════
   About us and VolaBlog. Everything here builds on the tokens and components
   already in site.css — no new colours, no new faces, no second scale. The
   landing page loads this too, for the one block it shares (.blog-strip).

   These pages are GENERATED by the Content Studio in my.volanote.com
   (lib/site-build.ts). Class names below are part of that contract: renaming
   one here without renaming it there silently unstyles a live page.
   ════════════════════════════════════════════════════════════════════════ */

/* An interior page has no 100vh hero to hide behind the fixed header, so it
   opens with its own clearance. */
.page-head{padding:clamp(140px,17vh,190px) 0 clamp(46px,6vw,78px)}
.page-head h1{font-size:clamp(38px,5.6vw,74px)}
.page-head .lede{margin-top:22px}
.page-head .strings-rule{margin:34px 0 0;max-width:420px}

/* ── the article ────────────────────────────────────────────────────────────
   One measure, one rhythm. Deliberately narrower than .wrap: 68 characters is
   the line a person actually reads, and the blog is the only place on this
   site with more than three sentences in a row. */
.prose{max-width:70ch;font-size:17px;line-height:1.78;color:var(--dim)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:clamp(27px,3.2vw,38px);color:var(--text);margin:1.9em 0 .5em;line-height:1.15}
.prose h3{font-size:clamp(21px,2.4vw,27px);color:var(--text);margin:1.6em 0 .45em;line-height:1.2}
.prose strong{color:var(--text);font-weight:700}
.prose em{font-style:italic}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose ul,.prose ol{margin:0 0 1.15em;padding-inline-start:1.35em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--accent-text)}
.prose blockquote{
  margin:1.6em 0;padding:2px 0 2px 22px;border-inline-start:2px solid var(--gold);
  font-family:var(--f-display);font-size:clamp(20px,2.4vw,26px);line-height:1.45;color:var(--text);
}
html[dir="rtl"] .prose blockquote{padding:2px 22px 2px 0}
.prose blockquote p{margin:0}
.prose img{border-radius:16px;margin:1.7em 0;border:1px solid var(--line)}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.12em .4em;
}
.prose hr{border:0;height:1px;background:var(--line);margin:2.4em 0}
/* Arabic prose sets larger and needs a touch more leading to stay comfortable. */
html[lang="ar"] .prose{font-size:18px;line-height:1.95}

/* ── blog index ─────────────────────────────────────────────────────────── */
.post-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.post-card{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;
  background:var(--surface);overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.post-card:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:var(--shadow)}
.post-card .shot{aspect-ratio:16/9;background:var(--bg-2);overflow:hidden}
.post-card .shot img{width:100%;height:100%;object-fit:cover}
/* A post with no cover keeps the institute's motif rather than a grey box. */
.post-card .shot.none{
  background:var(--ink) url('/brand/motif/strings-fan.svg') no-repeat center bottom/78% auto;opacity:.9;
}
.post-card .body{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-card h3{font-size:22px;line-height:1.22;color:var(--text)}
.post-card p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.6}
.post-card .foot{margin-top:auto;padding-top:12px;color:var(--faint);font-size:12.5px}
.tag{
  align-self:flex-start;font:700 10.5px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-text);
}
html[lang="ar"] .tag{letter-spacing:.06em;text-transform:none;font-size:12px}

/* Category filter — plain links, so it works with JavaScript switched off. */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.cats a{
  font:600 13px/1 var(--f-ui);padding:10px 16px;border-radius:999px;
  border:1px solid var(--line);color:var(--dim);transition:color .2s,border-color .2s,background .2s;
}
.cats a:hover{color:var(--text);border-color:var(--line-strong)}
.cats a[aria-current="page"]{background:var(--gold);border-color:var(--gold);color:#111111}

/* ── a single post ──────────────────────────────────────────────────────── */
.post-head{max-width:70ch}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--faint);font-size:13px;margin-top:20px}
.post-meta .dot{opacity:.5}
.post-cover{margin:clamp(30px,4vw,52px) 0;border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.post-cover img{width:100%;height:auto}
.post-foot{max-width:70ch;margin-top:clamp(46px,6vw,74px);padding-top:30px;border-top:1px solid var(--line)}
.post-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:22px}

/* ── the landing page's "latest from VolaBlog" strip ────────────────────── */
.blog-strip .post-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* ── about ──────────────────────────────────────────────────────────────── */
.about-values{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.about-story{max-width:70ch}

@media (max-width:760px){
  .post-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   VolaAlbum. These class names are part of lib/album-build.ts's contract —
   renaming one here without renaming it there silently unstyles a live page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the shelf ──────────────────────────────────────────────────────────── */
.album-card .shot{aspect-ratio:3/2;position:relative}
.album-card .count{
  position:absolute;inset-block-end:10px;inset-inline-end:10px;
  background:rgba(17,17,17,.72);border:1px solid rgba(247,244,239,.22);color:var(--paper);
  font:700 11.5px/1 var(--f-ui);padding:6px 10px;border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
html[lang="ar"] .album-card .count{font-size:13px;letter-spacing:0}

/* ── an album ───────────────────────────────────────────────────────────── */
.album-head{padding:clamp(112px,13vh,150px) 0 22px}
.album-head h1{font-size:clamp(34px,5vw,64px)}
.album-head .lede{margin-top:14px}
.album-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;color:var(--faint);font-size:13px}
.album-meta .dot{opacity:.5}
html[lang="ar"] .album-meta{font-size:14px}
.album-blk{padding-top:clamp(18px,2vw,26px)}

/* ── justified rows: no JavaScript, no measurement, no layout shift ───────
   Each tile's flex-basis is proportional to its own aspect ratio, so a row
   fills the width with every photograph at the same HEIGHT — the thing that
   makes a wall of mixed portrait and landscape read as a wall rather than as
   a grid with holes in it. The ::after spacer stops a lone last tile
   stretching across the full width. */
.photo-rows{display:flex;flex-wrap:wrap;gap:10px}
.photo-rows::after{content:"";flex-grow:999}
.photo{
  position:relative;flex:var(--ar) 1 calc(var(--ar) * 220px);min-width:0;
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--tint,var(--bg-2));
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .35s;
}
.photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:var(--ar)}
.photo:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
@media (max-width:640px){
  .photo-rows{gap:6px}
  .photo{flex-basis:calc(var(--ar) * 130px);border-radius:10px}
}

/* ── one photograph ─────────────────────────────────────────────────────── */
.photo-head{padding-block-end:22px}
.photo-head .back{display:inline-block;margin-bottom:14px}
.photo-head h1{font-size:clamp(28px,3.6vw,44px);max-width:32ch}
.photo-fig{margin:0}
.photo-frame{
  margin-inline:auto;max-width:min(1180px, calc(78vh * var(--ar)));
  border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--bg-2);
}
.photo-frame img{width:100%;height:auto}
.photo-cap{max-width:70ch;margin:20px auto 0;text-align:center;color:var(--dim);font-size:16.5px;line-height:1.7}
html[lang="ar"] .photo-cap{font-size:17.5px;line-height:1.9}
.photo-meta{justify-content:center;margin-top:14px}
.takedown{margin-top:clamp(30px,4vw,48px);color:var(--faint);font-size:13px}

.filmstrip{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  margin-top:clamp(28px,4vw,44px);padding-bottom:6px;scrollbar-width:thin;
}
.filmstrip a{
  flex:0 0 74px;height:74px;border-radius:10px;overflow:hidden;
  border:2px solid transparent;opacity:.6;scroll-snap-align:center;transition:opacity .2s;
}
.filmstrip a:hover,.filmstrip a:focus-visible{opacity:1}
.filmstrip a[aria-current="true"]{opacity:1;border-color:var(--gold)}
.filmstrip img{width:100%;height:100%;object-fit:cover}

/* ── the lightbox ────────────────────────────────────────────────────────
   Grounded on ink in BOTH themes, deliberately: a photograph needs a dark
   surround, and this is the one surface where gold is legal as text — 7.86:1
   on ink, against 2.19:1 on paper. */
.lightbox{
  border:0;padding:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;
  background:#111111;color:var(--paper);overflow:hidden;
}
.lightbox::backdrop{background:rgba(17,17,17,.94)}
.lightbox .lb-stage{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:56px 14px 96px}
.lightbox img{max-width:94vw;max-height:82dvh;width:auto;height:auto;object-fit:contain;transition:opacity .18s linear}
.lightbox.swapping img{opacity:0}
.lightbox .lb-bar{
  position:absolute;inset-inline:0;inset-block-end:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(17,17,17,.92),rgba(17,17,17,0));
}
.lightbox .lb-cap{max-width:60ch;margin:0;text-align:center;color:var(--warm);font-size:14.5px;line-height:1.6}
.lightbox .lb-count{color:var(--warm);font-size:12.5px}
html[lang="ar"] .lightbox .lb-cap{font-size:16px;line-height:1.85}
html[lang="ar"] .lightbox .lb-count{font-size:14px}
.lightbox .icon-btn{width:46px;height:46px;color:var(--paper);border-color:rgba(247,244,239,.28)}
.lightbox .icon-btn:hover{color:var(--gold);border-color:var(--gold)}
.lightbox .lb-close{position:absolute;inset-block-start:12px;inset-inline-end:12px}
.lightbox .lb-prev{position:absolute;inset-inline-start:10px;inset-block-start:calc(50% - 23px)}
.lightbox .lb-next{position:absolute;inset-inline-end:10px;inset-block-start:calc(50% - 23px)}

@media (prefers-reduced-motion:reduce){
  .photo:hover{transform:none}
  .lightbox img,.lightbox.swapping img{transition:none;opacity:1}
}