/* One article page on ikonoworld.art. Juno's template of 2026-11-07, built by Reno.
   Loaded after Css/vision.css, Responsive/visionResponsive.css and writing.css.

   Measures, with intent:
   reading column 720px  about 70 characters a line at 19px Chillax
   wide frame    1040px  cover, short films and the closing invitation, wider than the text
   body text     19px/32px Regular, plain white: long reading on a dark ground
   text headings 26px/34px Medium, mint: her Substack subheads, the Vision heading colour
*/
.ar-top { position: relative; height: 104px; background: var(--wr-ground); }
.ar-top .container { max-width: 100%; padding: 0 24px; }

.ar-main { padding: 32px 24px 0; }
.ar-head, .ar-text, .ar-subscribe, .ar-backline { max-width: 720px; margin-left: auto; margin-right: auto; }

.ar-back { display: inline-flex; align-items: center; gap: 10px; color: var(--wr-mint); text-decoration: none; font-size: 17px; font-weight: 500; letter-spacing: 1px; line-height: 27px; padding: 8px 0; }
.ar-back:hover { text-shadow: 1px 1px 5px #00fab399; }
.ar-back-arrow { transform: scaleX(-1); width: 17px; height: 14px; }

.ar-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 40px 0 16px; font-size: 16px; line-height: 24px; letter-spacing: .5px; color: var(--wr-white); }
.ar-topic { color: var(--wr-mint); font-weight: 500; }
.ar-title { font-size: 56px; line-height: 64px; font-weight: 500; letter-spacing: 1px; color: var(--wr-white); }
.ar-standfirst { margin-top: 20px; font-size: 22px; line-height: 34px; font-weight: 400; color: var(--wr-white); }
.ar-byline { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.ar-byline img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--wr-mint); }
.ar-byline p { display: flex; flex-direction: column; }
.ar-name { color: var(--wr-mint); font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: 1px; }
.ar-role { color: var(--wr-white); font-size: 16px; line-height: 24px; }

.ar-cover { max-width: 1040px; margin: 48px auto 56px; border-radius: 32px; padding: 1px; background: var(--wr-edge); box-shadow: var(--wr-glow); }
.ar-cover:has(+ .ar-cover-caption) { margin-bottom: 0; }
/* A tall cover (portrait) is shown whole, not cut to a strip. */
.ar-cover.is-tall { width: fit-content; max-width: 100%; }
.ar-cover.is-tall img { width: auto; max-width: 100%; max-height: min(80vh, 760px); aspect-ratio: auto; }
.ar-cover.is-tall + .ar-cover-caption { text-align: center; }
.ar-cover-caption { max-width: 1040px; margin: 10px auto 56px; font-size: 15px; line-height: 22px; color: var(--wr-white); font-weight: 500; }
.ar-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 31px; }

.ar-text { color: var(--wr-white); font-size: 19px; line-height: 32px; font-weight: 400; letter-spacing: .2px; }
.ar-text p { margin: 0 0 24px; }
.ar-text h2, .ar-text h3, .ar-text h4 { color: var(--wr-mint); font-size: 26px; line-height: 34px; font-weight: 500; letter-spacing: .5px; margin: 56px 0 16px; }
.ar-text strong { font-weight: 500; }
.ar-text hr { border: 0; border-top: 1px solid var(--wr-rule); margin: 48px 0; }
.ar-text { overflow-wrap: break-word; }  /* a long web address in her text wraps on a phone */
.ar-text a { color: var(--wr-mint); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.ar-figure { margin: 40px 0 40px; }
.ar-figure img { display: block; width: 100%; height: auto; border-radius: 24px; }
.ar-figure figcaption { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--wr-white); font-weight: 500; }

/* Short films: one to three of her vertical films, wider than the text column. */
.ar-films { margin: 48px calc((720px - 760px) / 2) 56px; }
.ar-films-label { color: var(--wr-mint); font-size: 17px; line-height: 27px; font-weight: 500; letter-spacing: 1px; margin-bottom: 16px; text-align: center; }
.ar-films-row { display: flex; justify-content: center; gap: 24px; }
.ar-films video {
  flex: 0 1 236px; min-width: 0; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 24px; background: #001829;
  border: 1px solid var(--wr-mint); box-shadow: var(--wr-glow);
}

/* The one invitation at the end: the related ikonoTV film. Picture and words side by
   side, never words on the painting. */
.ar-next {
  max-width: 1040px; margin: 96px auto 0; display: flex; border-radius: 32px; overflow: hidden;
  border: 1px solid #fff0;
  background-image: linear-gradient(#0a0108, #0a0108), linear-gradient(221deg, #4ed0ab 17.57%, #e40087 111.53%);
  background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--wr-glow);
}
.ar-next-img { flex: 1.4 1 0; min-width: 0; }
.ar-next-img img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ar-next-card { flex: 1 1 0; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ar-next-eyebrow { color: var(--wr-mint); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 1px; }
.ar-next-title { color: var(--wr-white); font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: 1px; }
.ar-next-quote { color: var(--wr-white); font-size: 18px; line-height: 30px; font-weight: 400; }
.ar-next .discover-button { align-self: flex-start; margin-top: 10px; }
/* A name like ikonoTV keeps its own letters (the site's buttons capitalise every word). */
.ar-next .discover-button.ar-keep-case { text-transform: none; }

.ar-subscribe { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--wr-rule); }
.ar-backline { margin-top: 40px; margin-bottom: 160px; }

@media (max-width: 900px) {
  .ar-next { flex-direction: column; }
  .ar-next-card { padding: 28px 28px 32px; }
}
@media (max-width: 767px) {
  .ar-films { margin-left: 0; margin-right: 0; }
}
@media (max-width: 600px) {
  .ar-top { height: 88px; }
  .ar-main { padding: 16px 16px 0; }
  .ar-meta { margin-top: 24px; font-size: 15px; }
  .ar-title { font-size: 36px; line-height: 44px; }
  .ar-standfirst { font-size: 19px; line-height: 30px; }
  .ar-cover { margin: 32px -16px 40px; border-radius: 0; padding: 1px 0; }
  .ar-cover img { border-radius: 0; }
  .ar-cover.is-tall { width: auto; max-width: none; }
  .ar-cover.is-tall img { width: 100%; max-height: none; }
  .ar-cover-caption { padding: 0 0; margin-bottom: 40px; }
  .ar-text { font-size: 18px; line-height: 30px; }
  .ar-text h2, .ar-text h3, .ar-text h4 { font-size: 23px; line-height: 30px; margin-top: 44px; }
  /* Phone: the films in one swipe row, the next one peeking in. */
  .ar-films { margin: 40px -16px 48px; }
  .ar-films-row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 12px; gap: 12px; scrollbar-width: none; }
  .ar-films video { flex: 0 0 68%; scroll-snap-align: center; }
  .ar-next { margin-top: 64px; border-radius: 24px; }
  .ar-next-title { font-size: 26px; line-height: 34px; }
  .ar-subscribe { margin-top: 56px; }
  .ar-backline { margin-bottom: 120px; }
}