/* The journal, broadsheet.

   Words first: large serif headlines, hairline rules, a drop capital, and
   photography used sparingly so it lands when it arrives. A piece with no
   picture still looks deliberate.

   Every value a person can change from the Look screen is read from a
   custom property with a fallback, so this file keeps working on its own
   if nothing has been set yet. */

.al-journal,
.al-journal-index{
  /* Colour comes from the theme, which is where the client's palette
     lives, and the theme itself reads the Look screen. Nothing here
     decides a colour; it only decides how the page is built. */
  --ink:var(--al-ink,#1A120B);
  --soft:var(--clay,#6B4A32);
  --faint:color-mix(in srgb, var(--clay,#6B4A32) 68%, var(--cream,#F7F0E3));
  --brand:var(--terracotta,#B4522E);
  --deep:var(--terracotta-deep,#9E4526);
  --rule:rgba(26,18,11,.18);
  --hair:rgba(26,18,11,.1);
  --paper:var(--cream,#F7F0E3);
  --face:var(--display,"Marcellus",Georgia,serif);
  --sans-face:var(--body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  --serif-face:var(--display,"Marcellus",Georgia,serif);
  --measure:var(--al-measure,62ch);
  --base:var(--al-base,18px);
  --scale:var(--al-scale,1);
  background:var(--paper);color:var(--ink);font-family:var(--sans-face);
  font-size:var(--base);line-height:1.75;
}
.al-journal *,.al-journal-index *{box-sizing:border-box}
.al-journal img,.al-journal-index img{display:block;max-width:100%}

/* a section label held between two hairlines */
.al-rule-label{display:flex;align-items:center;gap:20px;max-width:1180px;margin:0 auto;
  padding:34px 24px 0}
.al-rule-label::before,.al-rule-label::after{content:"";height:1px;background:var(--rule);flex:1}
.al-rule-label b{font:600 13px/1 var(--sans-face);letter-spacing:.3em;text-transform:uppercase;color:var(--deep)}

/* ---------- the index ---------- */

.al-journal-index{padding-bottom:60px}
.al-index-lead{max-width:1180px;margin:0 auto;padding:26px 24px 30px;display:grid;
  grid-template-columns:1.35fr 1fr;gap:34px;align-items:end}
.al-index-lead h2{margin:0;font-family:var(--face);font-weight:600;
  font-size:calc(clamp(34px,4.8vw,58px) * var(--scale));line-height:1.0;letter-spacing:-.02em}
.al-index-lead h2 a{color:inherit;text-decoration:none}
.al-index-lead h2 a:hover{color:var(--deep)}
.al-index-lead p{margin:0 0 10px;font-size:calc(17.5px * var(--scale));line-height:1.6;color:var(--soft)}
.al-meta{font:700 11.5px/1.6 var(--sans-face);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  display:flex;flex-wrap:wrap;gap:6px 16px;margin:0}
.al-index-shot{max-width:1180px;margin:0 auto;padding:0 24px}
.al-index-shot img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover}

.al-index-grid{max-width:1180px;margin:30px auto 0;padding:34px 24px 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.al-card{padding:0 26px;border-left:1px solid var(--hair);min-width:0}
.al-card:first-child{padding-left:0;border-left:0}
.al-card:last-child{padding-right:0}
.al-card .al-num{margin:0 0 12px;font:700 12px/1 var(--sans-face);letter-spacing:.2em;color:var(--brand)}
.al-card h2{margin:0 0 8px;font-family:var(--face);font-weight:600;
  font-size:calc(25px * var(--scale));line-height:1.12;letter-spacing:-.01em}
.al-card h2 a{color:inherit;text-decoration:none}
.al-card h2 a:hover{color:var(--deep)}
.al-card p{margin:0 0 12px;font-size:calc(15px * var(--scale));line-height:1.55;color:var(--soft)}
.al-card .al-card-shot{display:block;margin:0 0 14px}
.al-card .al-card-shot img{width:100%;aspect-ratio:3/2;object-fit:cover}

.al-index-head{max-width:1180px;margin:0 auto;padding:40px 24px 0}
.al-index-head h1{margin:0;font-family:var(--face);font-weight:600;
  font-size:calc(clamp(38px,5.4vw,60px) * var(--scale));line-height:1.02;letter-spacing:-.02em}
.al-index-head .al-sub{margin:14px 0 0;font-family:var(--sans-face);color:var(--soft);
  font-size:calc(18px * var(--scale));max-width:54ch;line-height:1.6}

/* ---------- the article ---------- */

.al-journal-head{padding:46px 24px 0}
.al-eyebrow{text-align:center;margin:0 0 18px;font:600 12px/1 var(--sans-face);letter-spacing:.3em;
  text-transform:uppercase;color:var(--deep)}
.al-eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(0,123,192,.4)}
.al-journal h1{max-width:20ch;margin:0 auto;text-align:center;font-family:var(--face);
  font-weight:600;font-size:calc(clamp(36px,5.2vw,62px) * var(--scale));line-height:1.02;
  letter-spacing:-.02em;text-wrap:balance}
.al-standfirst{max-width:52ch;margin:18px auto 0;text-align:center;font-family:var(--serif-face);
  font-style:italic;font-size:calc(22px * var(--scale));line-height:1.45;color:var(--soft)}
.al-journal .al-meta{justify-content:center;max-width:640px;margin:22px auto 0;gap:16px}
.al-journal .al-meta::before,.al-journal .al-meta::after{content:"";height:1px;background:var(--rule);flex:1;
  align-self:center}
.al-journal-cover{margin:34px auto 0;max-width:1180px;padding:0 24px}
.al-journal-cover img{width:100%;height:clamp(240px,40vw,520px);object-fit:cover}

.al-journal-body{padding:34px 0 0}
.al-journal-body > :not(.al-article){max-width:var(--measure);margin-left:auto;margin-right:auto;padding:0 24px}
.al-article{max-width:var(--measure);margin:0 auto;padding:0 24px}
.al-b{margin:0 0 26px}
.al-b-text p{font-family:var(--sans-face);margin:0 0 24px;font-size:var(--base);line-height:1.78}
.al-b-text p:last-child{margin-bottom:0}
.al-b-text.is-lead p{font-size:calc(21px * var(--scale));line-height:1.62;color:var(--soft)}
/* the drop capital opens the piece, once */
.al-article > .al-b-text:first-child > p:first-child::first-letter{float:left;font-family:var(--face);
  font-weight:600;font-size:calc(68px * var(--scale));line-height:.82;padding:5px 11px 0 0;color:var(--deep)}
.al-article a{color:var(--deep);text-decoration:none;border-bottom:1px solid rgba(0,123,192,.45)}
.al-article h2{font-family:var(--face);font-size:calc(clamp(27px,3.4vw,36px) * var(--scale));
  line-height:1.15;font-weight:600;margin:44px 0 14px}
.al-article h3{font-family:var(--sans-face);font-size:calc(21px * var(--scale));line-height:1.3;font-weight:800;
  margin:34px 0 10px}
.al-article ul,.al-article ol{margin:0 0 24px;padding-left:1.3em}
.al-article li{margin:0 0 8px}

.al-b-image,.al-b-video{margin:34px 0}
.al-b-image img,.al-b-video video{width:100%;height:auto}
.al-b-frame{position:relative;padding-top:56.25%;overflow:hidden;background:#06121c}
.al-b-frame iframe,.al-b-frame object,.al-b-frame embed{position:absolute;inset:0;width:100%;height:100%;border:0}
.al-b-image figcaption,.al-b-video figcaption{margin-top:9px;font-size:13px;line-height:1.5;color:var(--faint)}
.al-b-image.is-wide,.al-b-video.is-wide{width:min(1100px,92vw);margin-left:50%;transform:translateX(-50%)}
.al-b-image.is-full,.al-b-video.is-full{width:100vw;margin-left:50%;transform:translateX(-50%)}
.al-b-image.is-full figcaption,.al-b-video.is-full figcaption{max-width:var(--measure);margin:9px auto 0;padding:0 24px}
.al-b-plainlink{word-break:break-all}

.al-b-quote{margin:34px 0;padding:0;border-top:2px solid var(--brand);border-bottom:1px solid var(--rule)}
.al-b-quote blockquote{margin:0}
.al-b-quote p{margin:18px 0;font-family:var(--face);font-weight:400;
  font-size:calc(27px * var(--scale));line-height:1.3;color:var(--ink)}
.al-b-quote figcaption{margin:0 0 16px;font:700 11px/1 var(--sans-face);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}

.al-b-break{width:64px;height:0;margin:44px auto;border:0;border-top:2px solid var(--brand)}

/* ---------- what follows ---------- */

.al-journal-after{margin-top:60px;padding:46px 24px 56px;border-top:1px solid var(--rule)}
.al-journal-after .inner{max-width:1180px;margin:0 auto}
.al-journal-after h2{margin:0 0 6px;font-family:var(--face);font-weight:600;
  font-size:calc(clamp(26px,3.2vw,34px) * var(--scale));line-height:1.15}
.al-journal-after .al-sub{margin:0 0 24px;font-family:var(--sans-face);color:var(--soft);font-size:16.5px}

@media(max-width:900px){
  .al-index-lead,.al-index-grid{grid-template-columns:1fr}
  .al-card{border-left:0;padding:0 0 26px}
  .al-index-grid{gap:0}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* The same quiet placeholder where a journey card appears under an article. */

.al-journal .media{background:none;aspect-ratio:auto;border-radius:0}