/* erif-site.css --- the parts of the real site the handoff kit does not cover:
 * subpage body + rail, the footer, and the long-form content (bibliography,
 * poem and story pages, art browse) --- plus, at the bottom, the comp-fit layer
 * that reconciles the kit with kaolin's mockup and his corrections. Where the
 * kit, the mockup, and kaolin disagree, kaolin wins (rounding, texture),
 * then the mockup (type, layout), then the kit.
 */

/* ---------- home extras ---------- */

.home-header { padding-top: 34px; }
.site-mark-spacer { display: block; }

.home-also { margin-top: 22px; }
.home-also .also-card { grid-column: 1 / 7; padding: 22px 28px 20px; }
.home-also .code-card { grid-column: 7 / 13; }

.also-items {
  display: flex; flex-wrap: wrap; margin-top: 14px;
}
.also-items a {
  flex: 1 1 auto; text-align: center; padding: 16px 10px 4px;
  text-decoration: none; color: #3c463f;
  font-family: var(--font-label); font-size: 10.5px; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
}
.also-items a + a { border-left: 1px solid var(--rule); }
.also-items svg {
  display: block; margin: 0 auto 10px; width: 28px; height: 28px;
  stroke: currentColor; fill: none; stroke-width: 1.3;
}
.also-items a:hover { color: var(--terracotta-2); }

/* ALSO reads like the card headings, not like a micro label */
.also-card .section-label {
  color: var(--green);
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.also-card .section-label::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--terracotta); margin-top: 8px;
}

.code-card {
  margin: 0; /* a <pre> brings its own margins; the grid row should size it */
  letter-spacing: 0; /* the body's tightened tracking must not reach the mono */
  background: #14181a; color: #d8dcd4; padding: 28px 34px;
  font-family: var(--font-code); font-size: 14.5px; font-weight: 500;
  line-height: 1.85;
  white-space: pre; overflow-x: auto;
  box-shadow: var(--shadow-card);
}
.code-card .kw { color: var(--terracotta); }
.code-card .ty { color: #d08b62; }
.code-card .id { color: #a3bd84; }

.picks { margin: 0; padding: 0; list-style: none; }
.picks li {
  padding: 13px 0; border-bottom: 1px solid var(--rule);
  font-size: 15.5px; font-weight: 500;
}
.picks a { text-decoration: none; }
.picks .caret { color: var(--terracotta); margin-right: 12px; }

/* ---------- subpages: body + rail ---------- */

.subpage-body { margin-top: clamp(30px, 3.4vw, 52px); padding-bottom: 76px; }
.subpage-main { grid-column: 1 / 9; min-width: 0; }
.subpage-rail { grid-column: 10 / 13; }

@media (max-width: 820px) {
  .subpage-main, .subpage-rail { grid-column: 1 / -1; }
  .subpage-rail { margin-top: 26px; border-top: 1px solid var(--rule); padding-top: 18px; }
  .home-also .also-card, .home-also .code-card { grid-column: 1 / -1; }
}

.rail-list { margin: 8px 0 0; padding: 0; list-style: none; }
.rail-list a {
  display: block; padding: 6px 0; text-decoration: none;
  color: var(--ink-soft); font-size: 15px;
  border-bottom: 1px solid var(--rule);
}
.rail-list a:hover { color: var(--terracotta-2); }
.rail-list a.on { color: var(--terracotta); }

/* ---------- long-form content ---------- */

.subpage-main h2, .subpage-main h3 {
  margin: 1.7em 0 .4em; color: var(--green);
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
}
.subpage-main h2 { font-size: 30px; }
.subpage-main h3 { font-size: 23px; }
.subpage-main h4 {
  margin: 2em 0 .5em; color: var(--terracotta);
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}
.subpage-main p { margin: 0 0 1em; max-width: 68ch; }
.subpage-main img { max-width: 100%; height: auto; }
.subpage-main hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.subpage-main .muted { color: var(--muted); font-size: .92em; }

/* bibliography */
.biblio { margin: .3em 0 1.1em; padding: 0; list-style: none; max-width: 74ch; }
.biblio li {
  margin: .2em 0; padding-left: 4.4em; text-indent: -4.4em; line-height: 1.5;
}
.biblio .k {
  display: inline-block; width: 4em; text-indent: 0;
  font-family: var(--font-label); font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.biblio .rp { color: var(--muted); font-size: .88em; }
.here { margin: .5em 0 0; padding: 0; list-style: none; }
.here li { margin: .5em 0; }
.here .t { font-weight: 600; }

/* poem + story pages */
.poem { max-width: 34em; }
.poem .verse { white-space: pre-wrap; font-size: 1.06em; line-height: 1.66; margin: .3em 0 1.4em; }
.story { max-width: 36em; }
.story .prose p { line-height: 1.62; }
.story .meta, .poem .meta { color: var(--muted); font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.credit {
  border-top: 1px solid var(--rule); padding-top: .8em; margin-top: 1.6em;
  color: var(--ink-soft); font-size: .93em;
}
.scan { margin-top: 1.9em; }
.scan h3 {
  margin: 0 0 .7em; color: var(--terracotta);
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}
.scan img { border: 1px solid var(--rule); background: #fff; }
.scan .cap { color: var(--muted); font-size: .86em; margin: .5em 0 0; }

/* app list on /code/ios/ */
.applist { margin: 0; padding: 0; list-style: none; }
.applist li { display: grid; grid-template-columns: 62px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--rule); }
.applist li:first-child { border-top: 0; }
.applist .ico { width: 62px; height: 62px; aspect-ratio: 1; object-fit: cover; border-radius: 13px; }
.applist h4 { margin: 0; color: var(--green); font-family: var(--font-body); font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.applist .meta { display: block; margin: 3px 0 6px; color: var(--muted); font-family: var(--font-label); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.applist p { margin: 0 0 .5em; }
.applist .links { font-size: .92em; }

/* ---------- app landing pages (the /slug/ pages) ---------- */

.app-head {
  display: grid; grid-template-columns: 84px 1fr; gap: 20px;
  align-items: center; margin: 0 0 20px;
}
.app-head img {
  width: 84px; height: 84px; aspect-ratio: 1; object-fit: cover;
  border-radius: 18px; box-shadow: var(--shadow-card);
}
.app-head .meta { font-size: 10.5px; }
.app-page .lead { font-size: 17px; line-height: 1.6; max-width: 58ch; }
.app-page ul { max-width: 62ch; }
.app-page ul li { margin: .35em 0; }

.shot-row {
  display: flex; gap: 12px; overflow-x: auto;
  margin: 24px 0 10px; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.shot-row img {
  height: 300px; width: auto; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid var(--rule); background: #fff;
}

.store-links { margin: 20px 0 8px; display: flex; flex-wrap: wrap; gap: 12px 26px; }

/* ---------- footer: a hairline that carries the years ---------- */

.site-foot { margin-top: 30px; padding: 10px 0 58px; }
.foot-years {
  display: flex; align-items: center; gap: 20px;
  color: var(--muted);
  font-family: var(--font-label); font-size: 12px; font-weight: 600;
  letter-spacing: .22em;
}
.foot-years::before, .foot-years::after {
  content: ""; flex: 1; border-top: 1px solid var(--rule);
}

/* the display face sets line-height .82, so a deck needs clearance for
   descenders on the line above */
.subpage-deck { margin-top: 22px; }
.subpage-title .display {
  text-transform: uppercase;
  /* hang the title's ink onto the deck's left edge, as on the homepage */
  margin-left: -.035em;
}

/* ============================================================
   Comp-fit layer, 2026-08-17: reconcile with the homepage mockup.
   Kaolin's earlier corrections that survive it: 6px radius, real
   shadows, texture on cards and panel, the small-caps gradient
   wordmark, uppercase heads over a terracotta rule.
   ============================================================ */

/* --- rounded, and real shadows (kaolin) --- */
.paper-card, .apps-panel, .code-card, .also-card { border-radius: 6px; }
.paper-card { box-shadow: 0 3px 16px rgba(36,31,24,.13), 0 1px 3px rgba(36,31,24,.08); }
.apps-panel { box-shadow: 0 4px 20px rgba(20,32,26,.22); }
.home-hero-art { border-radius: 5px; overflow: hidden; }

/* --- cards share the page's texture so they sit IN it, not on it (kaolin) --- */
.paper-card::before { opacity: .5; background-size: 460px 460px; }

/* --- the green panel is a surface, not a flat fill (kaolin) --- */
.dark-panel::before { opacity: .62; background-size: cover; mix-blend-mode: soft-light; }
.apps-panel { background: #1b3830; }

/* --- ground: the texture supplies tooth, the veil keeps it pale cream.
   (the old multiply blend read as dark tan --- comp and kaolin both want
   the near-white cream with just a whisper of grain) --- */
body {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(245,240,232,.85), rgba(245,240,232,.85)),
    url("/assets/paper-cream.jpg");
  background-size: auto, 640px 640px;
  background-blend-mode: normal;
}

/* --- header: the wordmark rises beside the nav, like the comp --- */
.home-intro { padding-top: 0; margin-top: -44px; }
.home-quote { align-self: start; margin-top: clamp(64px, 7vw, 96px); }

/* --- wordmark: small caps, a gradient, thinner slash, italic erif (kaolin) --- */
.home-brand .display {
  font-size: clamp(100px, 11.4vw, 164px);
  line-height: .96;
  /* Crimson's K and F both carry a .04em left side bearing; hang the
     wordmark by that much so its INK shares the deck and bio-rule's
     left edge (measured via canvas actualBoundingBoxLeft) */
  margin-left: -.04em;
  font-variant-caps: small-caps;
  text-transform: none;
  color: var(--green);
}
/* Each line is its own block, so the K and the F share a left edge in
   every engine (an inline span broken by <br> drifted on iOS). The
   gradient is clipped to text on spans holding ONLY the name --- clipping
   the whole h1 makes Chrome double-paint the transformed erif span up at
   the border-box origin. Two gradient segments stand in for one gradient
   sliced across both lines. */
.home-brand .brand-line { display: block; }
.home-brand .brand-name {
  /* the padding lets the clipped background reach past the em box up to
     the cap ascenders (line-height is under 1) */
  padding-top: .12em;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.home-brand .bn-1 { background-image: linear-gradient(178deg, #0d2620 0%, #1a3a2f 100%); }
.home-brand .bn-2 { background-image: linear-gradient(178deg, #1e4034 0%, #2b5344 100%); }
.home-brand .slash {
  font-weight: 300; font-size: .62em;
  color: var(--terracotta);
  opacity: .85;
}
.home-brand .erif {
  font-style: italic; font-weight: 400; letter-spacing: .01em;
  font-variant-caps: normal; text-transform: lowercase;
  font-size: .58em;
  color: var(--muted);
  transform: translateY(-.04em) skewX(-3deg);
}
.home-deck {
  margin-top: 24px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .22em; line-height: 1.9;
}
.subpage-deck { font-size: 12.5px; font-weight: 500; letter-spacing: .22em; }

/* --- middle band: bio against a green-tinged rule, hero held to the band --- */
.home-middle { margin-top: 48px; }
.home-work { padding-bottom: 0; }
.home-bio {
  border-left: 3px solid #24443a;
  /* the bar runs the full row height, matching the painting beside it,
     and the text floats a little inside it */
  align-self: stretch;
  padding: 14px 0 14px 36px;
  font-size: 16px; font-weight: 600; line-height: 1.55;
}
.home-bio p { margin: 0 0 13px; }
.home-bio p:last-child { margin-bottom: 0; }
/* magazine names read as text; only the sign-off line keeps the green ---
   and the sign-off is the serif italic, a quiet change of voice */
.home-bio em { color: inherit; }
.home-bio .bio-tag em {
  color: #35664f;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 400; letter-spacing: 0;
}
/* a <figure> brings UA margins that pushed the hero off the bio top line
   and off the content right edge */
.home-hero-art { margin: 0; min-height: 0; height: clamp(270px, 25vw, 350px); }
.home-hero-art img { height: 100%; }

/* --- apps panel: full row height, big icons, sans names, CTA at the foot --- */
.apps-panel {
  display: flex; flex-direction: column;
  padding: 30px 30px 28px; min-height: 0;
}
.apps-panel h2 {
  margin: 0 0 12px;
  font-size: 14px; font-weight: 700; letter-spacing: .21em;
}
.apps-panel h2::after {
  content: ""; display: block; width: 36px; height: 2px;
  background: var(--terracotta); margin-top: 10px;
}
.app-row {
  grid-template-columns: 64px 1fr; gap: 18px; padding: 18px 0;
  align-items: start;
}
.app-row img {
  width: 64px; height: 64px; border-radius: 14px;
  align-self: start; object-fit: contain;
}
.app-row h3 {
  font-family: var(--font-body); font-size: 17.5px; font-weight: 600;
  letter-spacing: .01em;
}
.app-row p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: rgba(240,235,224,.78); }
.apps-panel .arrow-link {
  margin-top: auto; padding-top: 20px;
  color: rgba(245,239,230,.92); font-size: 11px; letter-spacing: .18em;
}
.apps-panel .arrow-link::after { content: "⟶"; color: #d08b62; font-size: 15px; }

/* --- feature cards: copy column with the CTA pinned to the foot, media
   bled flush to the card edge with cream gutters between images --- */
.feature-row { overflow: hidden; }
.feature-copy {
  display: flex; flex-direction: column;
  padding: 40px 34px 32px 42px;
}
.feature-copy h2 {
  font-size: 26px; margin: 0 0 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.feature-copy h2::after {
  content: ""; display: block; width: 52px; height: 2px;
  background: var(--terracotta); margin-top: 10px;
}
.feature-copy p { margin: 0 0 16px; max-width: 24ch; font-size: 15.5px; font-weight: 500; line-height: 1.62; }
.feature-copy .arrow-link { margin-top: auto; padding-top: 14px; }

.feature-media { position: relative; }
.feature-row .feature-media.strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 0; background: transparent;
}
.feature-row .feature-media.strip img { border-radius: 0; }

/* writing card: the picks are their own column between copy and cover */
.feature-row.reverse {
  grid-template-columns: minmax(185px, .95fr) minmax(0, 1.1fr) minmax(190px, .8fr);
}
.feature-picks { padding: 40px 28px 28px 0; }

@media (max-width: 820px) {
  .feature-row.reverse { grid-template-columns: 1fr; }
  .feature-picks { padding: 0 34px 24px 38px; }
  .home-intro { margin-top: 0; }
  .home-quote { margin-top: 34px; }
  .home-hero-art { height: auto; min-height: 240px; }
}

/* --- section heads: full caps over a terracotta rule (kaolin) --- */
.also-card .section-label { text-transform: uppercase; }

/* ============================================================
   Nav alignment, 2026-08-17: the current page's underline reaches a
   little past the word, and the home quote bar lands under HOME.
   ============================================================ */
.site-nav a[aria-current="page"]::after { left: -7px; right: -7px; }
.home-quote { grid-column: 9 / 13; }

/* ============================================================
   Editorial subpages (art + code), fit to kaolin's mockups.
   These pages set $erif_wide: no rail, sections flow full width.
   ============================================================ */

.section-label.ruled {
  display: inline-block;
  margin-bottom: 22px; padding-bottom: 8px;
  border-bottom: 2px solid var(--terracotta);
  color: var(--green); font-size: 12px;
}

.serif-h {
  margin: 0 0 14px; color: var(--green);
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  letter-spacing: -.01em;
}

/* ---------- code ---------- */

.code-feature {
  overflow: hidden; border-radius: 6px;
  /* the media's intrinsic size must not drive the row */
  height: clamp(360px, 32vw, 460px); min-height: 0;
}
.code-feature-media { min-height: 0; }
@media (max-width: 820px) {
  .code-feature { height: auto; }
  .code-feature-media { min-height: 260px; max-height: 320px; }
}
.code-feature-copy { display: flex; flex-direction: column; align-items: flex-start; }
.code-feature-copy h2 { font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; letter-spacing: -.01em; }
.code-feature-copy p { font-size: 15.5px; font-weight: 500; line-height: 1.62; max-width: 28ch; margin: 0 0 16px; }
.code-feature-copy .arrow-link { margin-top: auto; padding-top: 14px; }
.code-feature-media { position: relative; }

.selected-section { border-top: 0; padding-top: 0; margin-top: clamp(44px, 5vw, 64px); }

.project-item img { border-radius: 15px; }
.project-item h3 { font-family: var(--font-body); font-size: 16.5px; font-weight: 600; margin: 2px 0 4px; }
.project-item p { font-size: 14px; font-weight: 500; line-height: 1.5; margin: 0 0 8px; }
.project-item .arrow-link { font-size: 10px; }

/* the code mockup underlines its CTAs; the home one does not */
.project-item .arrow-link,
.code-feature-copy .arrow-link,
.subpage-footer-link .arrow-link {
  border-bottom: 1px solid rgba(21,49,42,.35);
  padding-bottom: 3px;
}
.project-item .arrow-link:hover,
.code-feature-copy .arrow-link:hover,
.subpage-footer-link .arrow-link:hover { border-bottom-color: var(--terracotta); }

.code-columns {
  margin-top: clamp(44px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: clamp(28px, 4vw, 56px);
}
.code-columns .col { min-width: 0; }
.code-columns .col + .col {
  border-left: 1px solid var(--rule);
  padding-left: clamp(28px, 4vw, 56px);
}

.mini-apps { list-style: none; margin: 0; padding: 0; }
.mini-apps li {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px;
  padding: 12px 0; align-items: start;
}
.mini-apps img { width: 44px; height: 44px; border-radius: 10px; }
.mini-apps h4 { margin: 0; color: var(--green); font-size: 16px; font-weight: 600; }
.mini-apps h4 a { text-decoration: none; }
.mini-apps p { margin: 2px 0 0; color: var(--ink-soft); font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.mini-apps + .arrow-link { margin-top: 14px; }

.highlight-list { list-style: none; margin: 0; padding: 0; }
.highlight-list li {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule); align-items: center;
}
.highlight-list li:last-child { border-bottom: 0; }
.highlight-list .thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 4px; }
.highlight-list h4 { margin: 0; color: var(--green); font-size: 16px; font-weight: 600; }
.highlight-list h4 a { text-decoration: none; }
.highlight-list p { margin: 2px 0 4px; color: var(--ink-soft); font-size: 13.5px; font-weight: 500; line-height: 1.45; }

.status {
  font-family: var(--font-label); font-size: 10px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
}
.status.progress { color: var(--terracotta); }
.status.legacy { color: var(--muted); }

/* ---------- art ---------- */

.art-feature {
  margin: 0; /* UA figure margins */
  border-radius: 6px;
  height: clamp(340px, 36vw, 520px); min-height: 0;
}

.art-statement {
  margin-top: 22px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) auto;
  gap: 24px; align-items: end;
  padding: 32px 38px 30px;
}
.art-statement h2 {
  margin: 0 0 12px; color: var(--green);
  font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600; letter-spacing: -.01em;
}
.art-statement p {
  margin: 0; color: var(--ink-soft);
  font-size: 15px; font-weight: 500; line-height: 1.62; max-width: 50ch;
}

.art-selected {
  margin-top: clamp(40px, 4.6vw, 60px); padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(220px, 1fr);
  gap: clamp(28px, 4vw, 52px);
}
.works-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.work-thumb .thumb.square { display: block; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; margin-bottom: 10px; background: var(--paper-deep); }
.work-thumb .thumb.square img { width: 100%; height: 100%; object-fit: cover; }
.work-thumb h3 { font-family: var(--font-quote); font-size: 16px; font-weight: 600; color: var(--ink); }
.art-recent { border-left: 1px solid var(--rule); padding-left: clamp(24px, 3vw, 40px); }
.art-recent p { margin: 0 0 16px; color: var(--ink-soft); font-size: 14.5px; font-weight: 500; line-height: 1.65; max-width: 30ch; }

.art-columns {
  margin-top: clamp(40px, 4.6vw, 60px); padding-top: 30px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.art-columns article { min-width: 0; }
.art-columns article + article {
  border-left: 1px solid var(--rule);
  padding-left: clamp(28px, 4vw, 56px);
}
.art-columns .serif-h { font-size: 22px; }
.art-columns p { margin: 0 0 6px; color: var(--ink-soft); font-size: 14.5px; font-weight: 500; line-height: 1.6; max-width: 30ch; }

.cat-list { list-style: none; margin: 10px 0 0; padding: 0; }
.cat-list a {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 500;
}
.cat-list li:last-child a { border-bottom: 0; }
.cat-list a:hover { color: var(--terracotta-2); }
.cat-list .n { color: var(--muted); font-size: 12px; }

.art-story {
  margin-top: clamp(44px, 5vw, 64px); padding-top: 28px;
  border-top: 1px solid var(--rule);
  max-width: 780px;
}
.art-story .row { display: grid; grid-template-columns: 110px 1fr; gap: 20px; margin: 0 0 22px; }
.art-story .row img { width: 110px; height: 110px; object-fit: cover; border-radius: 4px; }
.art-story .row p { margin: 0; font-size: 15px; line-height: 1.62; }

.art-colophon {
  margin-top: clamp(40px, 5vw, 60px); padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
}
.art-colophon .saying { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--green); }
.art-colophon .mark {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

@media (max-width: 820px) {
  .code-columns, .art-selected, .art-columns { grid-template-columns: 1fr; }
  .code-columns .col + .col, .art-columns article + article {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 22px;
  }
  .art-recent { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 22px; }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .art-statement { grid-template-columns: 1fr; align-items: start; }
}