/* ===========================================================
   ENCYCLYKA — journal section
   Loaded as a file, never inline: the site CSP allows style-src 'self' only,
   and an inline <style> is silently dropped by the browser.
   =========================================================== */

  .wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); }
  a{ color:inherit; text-decoration:none; }
  .paperhead{ background:var(--ink); color:var(--cream); }
  .paperhead .wrap{ display:flex; justify-content:space-between; align-items:center;
                    gap:24px; padding-top:22px; padding-bottom:22px; flex-wrap:wrap; }
  .paperhead .logo{ font-family:var(--f-display); font-weight:600; font-size:22px;
                    letter-spacing:.12em; text-transform:uppercase; }
  .crumbs{ font-family:var(--f-ui); font-size:11.5px; letter-spacing:var(--tracking-wide);
           text-transform:uppercase; color:#a39d8e; display:flex; gap:10px; flex-wrap:wrap; }
  .crumbs a{ border-bottom:1px solid rgba(201,196,182,.35); }
  .crumbs a:hover{ color:#f2efe8; }

  .masthead{ padding:78px 0 44px; border-bottom:1px solid var(--line-soft); }
  .eyebrow{ font-family:var(--f-ui); font-size:12px; letter-spacing:var(--tracking-wider);
            text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:12px; }
  .eyebrow::before{ content:''; width:28px; height:1px; background:var(--accent); display:inline-block; }
  .masthead h1{ font-family:var(--f-display); font-weight:700; font-size:clamp(38px,6vw,74px);
                line-height:1.02; margin-top:22px; }
  .masthead .lede{ color:var(--ink-soft); font-size:18px; max-width:640px; margin-top:20px; line-height:1.6; }

  .issue{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
          padding:52px 0; border-bottom:1px solid var(--line-soft); }
  .issue__visual{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#dcd8cd; }
  .issue__visual img{ width:100%; height:100%; object-fit:cover; display:block; }
  .issue__kind{ font-family:var(--f-ui); font-size:11.5px; letter-spacing:var(--tracking-wide);
                text-transform:uppercase; color:var(--accent); }
  .issue h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(26px,3.2vw,40px);
             line-height:1.1; margin:14px 0 16px; }
  .issue__meta{ display:flex; gap:22px; font-family:var(--f-ui); font-size:11.5px;
                letter-spacing:var(--tracking-wide); text-transform:uppercase;
                color:var(--ink-faint); padding-top:14px; border-top:1px solid var(--line-soft); }

  .list{ padding:52px 0 90px; }
  .list h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(24px,2.6vw,32px);
            margin-bottom:28px; }
  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
  .card{ display:flex; flex-direction:column; gap:14px; }
  .card__visual{ aspect-ratio:4/5; overflow:hidden; background:#dcd8cd; }
  .card__visual img{ width:100%; height:100%; object-fit:cover; display:block;
                     transition:transform .6s ease; }
  .card:hover .card__visual img{ transform:scale(1.04); }
  .card__kind{ font-family:var(--f-ui); font-size:11px; letter-spacing:var(--tracking-wide);
               text-transform:uppercase; color:var(--accent); }
  .card h3{ font-family:var(--f-display); font-weight:600; font-size:22px; line-height:1.25; }
  .card:hover h3{ color:var(--accent); }
  .card__meta{ font-family:var(--f-ui); font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }

  /* material page */
  /* padding-top/bottom, never the shorthand: this element also carries
     .wrap, and a shorthand would zero its left/right padding and push
     the whole article against the viewport edge. */
  .article{ padding-top:70px; padding-bottom:90px; }
  .article__head{ max-width:820px; }
  .article__head h1{ font-family:var(--f-display); font-weight:700;
                     font-size:clamp(32px,4.6vw,58px); line-height:1.05; margin:20px 0 18px; }
  .article__lede{ color:var(--ink-soft); font-size:19px; line-height:1.6; }
  .article__meta{ display:flex; gap:24px; flex-wrap:wrap; font-family:var(--f-ui);
                  font-size:11.5px; letter-spacing:var(--tracking-wide); text-transform:uppercase;
                  color:var(--ink-faint); padding:16px 0; border-top:1px solid var(--line);
                  border-bottom:1px solid var(--line); margin-top:26px; }
  .article__figure{ margin:44px auto; max-width:860px; }
  .article__figure img{ width:100%; height:auto; display:block; }
  .article__figure figcaption{ font-family:var(--f-ui); font-size:11.5px; color:var(--ink-faint);
                               padding-top:12px; letter-spacing:.03em; }
  .article__body{ max-width:680px; margin-top:38px; }
  .article__body h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(21px,2.2vw,28px);
                     margin:40px 0 12px; }
  .article__body p{ color:var(--ink-soft); font-size:17px; line-height:1.75; margin-bottom:16px; }
  .article__body p + p{ margin-top:14px; }
  .note{ background:var(--paper); border:1px solid var(--line-soft); padding:20px 24px;
         max-width:680px; margin-top:44px; }
  .note p{ color:var(--ink-soft); font-size:15px; line-height:1.65; margin:0; }
  .more{ margin-top:56px; padding-top:26px; border-top:1px solid var(--line); max-width:680px; }
  .more h2{ font-family:var(--f-ui); font-size:12px; letter-spacing:var(--tracking-wider);
            text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; }
  .more a{ display:block; padding:12px 0; border-bottom:1px solid var(--line-soft);
           font-family:var(--f-display); font-size:19px; }
  .more a:hover{ color:var(--accent); }

  @media (max-width: 860px){
    .issue{ grid-template-columns:1fr; gap:28px; }
    .cards{ grid-template-columns:1fr 1fr; gap:24px; }
  }
  @media (max-width: 560px){
    .cards{ grid-template-columns:1fr; }
    .masthead{ padding:52px 0 30px; }
  }

/* ---- moved out of inline style attributes, which the strict CSP drops ---- */
.skip-link{ position:absolute; top:-100px; left:var(--edge); z-index:99;
            font-family:var(--f-ui); font-size:13px; letter-spacing:.14em;
            text-transform:uppercase; background:var(--ink); color:var(--bg);
            padding:14px 22px; }
.skip-link:focus{ top:12px; }
.paperfoot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
             padding-top:24px; padding-bottom:24px;
             font-family:var(--f-ui); font-size:11.5px; letter-spacing:.03em;
             color:#7d7869; }
.paperfoot a{ color:#948e80; }
.paperfoot a:hover{ color:#f2efe8; }
.issue__lede{ color:var(--ink-soft); font-size:16.5px; line-height:1.7; }
.issue__cta{ margin-top:24px; }
.note .mail{ color:var(--accent); }