/* ==========================================================================
   Run Playgrounds — article-shell.css
   Blog / article page frame: hero, breadcrumb, two-column layout, author card,
   share row, inquiry band, ruler-edge divider. Tokens come from site.css (§0):
   three colours, Archivo + Plex Mono, 13/17/23/30/40/72/96, radius 2px, no blur shadows.
   ========================================================================== */

.article-page { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .article-page { padding: 0 20px; } }

/* ---------- divider: ruler edge (blog system; upper section cuts its own bottom) ----------
   Ticks every 2.5%, long tick every 10%. The next section tucks 20px underneath (.cut-next). */
.cut--ruler { position: relative; z-index: 2; padding-bottom: calc(var(--pad-sec) + 20px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(97.50% + 1px) 100%, calc(97.50% + 1px) calc(100% - 10px), calc(97.50% - 1px) calc(100% - 10px), calc(97.50% - 1px) 100%, calc(95.00% + 1px) 100%, calc(95.00% + 1px) calc(100% - 10px), calc(95.00% - 1px) calc(100% - 10px), calc(95.00% - 1px) 100%, calc(92.50% + 1px) 100%, calc(92.50% + 1px) calc(100% - 10px), calc(92.50% - 1px) calc(100% - 10px), calc(92.50% - 1px) 100%, calc(90.00% + 1px) 100%, calc(90.00% + 1px) calc(100% - 20px), calc(90.00% - 1px) calc(100% - 20px), calc(90.00% - 1px) 100%, calc(87.50% + 1px) 100%, calc(87.50% + 1px) calc(100% - 10px), calc(87.50% - 1px) calc(100% - 10px), calc(87.50% - 1px) 100%, calc(85.00% + 1px) 100%, calc(85.00% + 1px) calc(100% - 10px), calc(85.00% - 1px) calc(100% - 10px), calc(85.00% - 1px) 100%, calc(82.50% + 1px) 100%, calc(82.50% + 1px) calc(100% - 10px), calc(82.50% - 1px) calc(100% - 10px), calc(82.50% - 1px) 100%, calc(80.00% + 1px) 100%, calc(80.00% + 1px) calc(100% - 20px), calc(80.00% - 1px) calc(100% - 20px), calc(80.00% - 1px) 100%, calc(77.50% + 1px) 100%, calc(77.50% + 1px) calc(100% - 10px), calc(77.50% - 1px) calc(100% - 10px), calc(77.50% - 1px) 100%, calc(75.00% + 1px) 100%, calc(75.00% + 1px) calc(100% - 10px), calc(75.00% - 1px) calc(100% - 10px), calc(75.00% - 1px) 100%, calc(72.50% + 1px) 100%, calc(72.50% + 1px) calc(100% - 10px), calc(72.50% - 1px) calc(100% - 10px), calc(72.50% - 1px) 100%, calc(70.00% + 1px) 100%, calc(70.00% + 1px) calc(100% - 20px), calc(70.00% - 1px) calc(100% - 20px), calc(70.00% - 1px) 100%, calc(67.50% + 1px) 100%, calc(67.50% + 1px) calc(100% - 10px), calc(67.50% - 1px) calc(100% - 10px), calc(67.50% - 1px) 100%, calc(65.00% + 1px) 100%, calc(65.00% + 1px) calc(100% - 10px), calc(65.00% - 1px) calc(100% - 10px), calc(65.00% - 1px) 100%, calc(62.50% + 1px) 100%, calc(62.50% + 1px) calc(100% - 10px), calc(62.50% - 1px) calc(100% - 10px), calc(62.50% - 1px) 100%, calc(60.00% + 1px) 100%, calc(60.00% + 1px) calc(100% - 20px), calc(60.00% - 1px) calc(100% - 20px), calc(60.00% - 1px) 100%, calc(57.50% + 1px) 100%, calc(57.50% + 1px) calc(100% - 10px), calc(57.50% - 1px) calc(100% - 10px), calc(57.50% - 1px) 100%, calc(55.00% + 1px) 100%, calc(55.00% + 1px) calc(100% - 10px), calc(55.00% - 1px) calc(100% - 10px), calc(55.00% - 1px) 100%, calc(52.50% + 1px) 100%, calc(52.50% + 1px) calc(100% - 10px), calc(52.50% - 1px) calc(100% - 10px), calc(52.50% - 1px) 100%, calc(50.00% + 1px) 100%, calc(50.00% + 1px) calc(100% - 20px), calc(50.00% - 1px) calc(100% - 20px), calc(50.00% - 1px) 100%, calc(47.50% + 1px) 100%, calc(47.50% + 1px) calc(100% - 10px), calc(47.50% - 1px) calc(100% - 10px), calc(47.50% - 1px) 100%, calc(45.00% + 1px) 100%, calc(45.00% + 1px) calc(100% - 10px), calc(45.00% - 1px) calc(100% - 10px), calc(45.00% - 1px) 100%, calc(42.50% + 1px) 100%, calc(42.50% + 1px) calc(100% - 10px), calc(42.50% - 1px) calc(100% - 10px), calc(42.50% - 1px) 100%, calc(40.00% + 1px) 100%, calc(40.00% + 1px) calc(100% - 20px), calc(40.00% - 1px) calc(100% - 20px), calc(40.00% - 1px) 100%, calc(37.50% + 1px) 100%, calc(37.50% + 1px) calc(100% - 10px), calc(37.50% - 1px) calc(100% - 10px), calc(37.50% - 1px) 100%, calc(35.00% + 1px) 100%, calc(35.00% + 1px) calc(100% - 10px), calc(35.00% - 1px) calc(100% - 10px), calc(35.00% - 1px) 100%, calc(32.50% + 1px) 100%, calc(32.50% + 1px) calc(100% - 10px), calc(32.50% - 1px) calc(100% - 10px), calc(32.50% - 1px) 100%, calc(30.00% + 1px) 100%, calc(30.00% + 1px) calc(100% - 20px), calc(30.00% - 1px) calc(100% - 20px), calc(30.00% - 1px) 100%, calc(27.50% + 1px) 100%, calc(27.50% + 1px) calc(100% - 10px), calc(27.50% - 1px) calc(100% - 10px), calc(27.50% - 1px) 100%, calc(25.00% + 1px) 100%, calc(25.00% + 1px) calc(100% - 10px), calc(25.00% - 1px) calc(100% - 10px), calc(25.00% - 1px) 100%, calc(22.50% + 1px) 100%, calc(22.50% + 1px) calc(100% - 10px), calc(22.50% - 1px) calc(100% - 10px), calc(22.50% - 1px) 100%, calc(20.00% + 1px) 100%, calc(20.00% + 1px) calc(100% - 20px), calc(20.00% - 1px) calc(100% - 20px), calc(20.00% - 1px) 100%, calc(17.50% + 1px) 100%, calc(17.50% + 1px) calc(100% - 10px), calc(17.50% - 1px) calc(100% - 10px), calc(17.50% - 1px) 100%, calc(15.00% + 1px) 100%, calc(15.00% + 1px) calc(100% - 10px), calc(15.00% - 1px) calc(100% - 10px), calc(15.00% - 1px) 100%, calc(12.50% + 1px) 100%, calc(12.50% + 1px) calc(100% - 10px), calc(12.50% - 1px) calc(100% - 10px), calc(12.50% - 1px) 100%, calc(10.00% + 1px) 100%, calc(10.00% + 1px) calc(100% - 20px), calc(10.00% - 1px) calc(100% - 20px), calc(10.00% - 1px) 100%, calc(7.50% + 1px) 100%, calc(7.50% + 1px) calc(100% - 10px), calc(7.50% - 1px) calc(100% - 10px), calc(7.50% - 1px) 100%, calc(5.00% + 1px) 100%, calc(5.00% + 1px) calc(100% - 10px), calc(5.00% - 1px) calc(100% - 10px), calc(5.00% - 1px) 100%, calc(2.50% + 1px) 100%, calc(2.50% + 1px) calc(100% - 10px), calc(2.50% - 1px) calc(100% - 10px), calc(2.50% - 1px) 100%, 0 100%); }
.cut-next { position: relative; z-index: 1; margin-top: -20px; padding-top: calc(var(--pad-sec) + 20px); }

/* ---------- breadcrumb ---------- */
.breadcrumb { margin: 0 0 32px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0;
  font-family: var(--f-mono); font-size: var(--t-13); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumb li + li::before { content: "\203A"; margin: 0 10px; opacity: .7; }
.breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumb a:hover { border-bottom-color: currentColor; }
.breadcrumb [aria-current] { max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; opacity: .8; }
.on-dark .breadcrumb { color: var(--on-dark-2); }
.on-dark .breadcrumb a { color: #FFFFFF; }

/* ---------- post hero: feature image under an evergreen veil, title-block meta strip ---------- */
.blog-hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--green); color: #FFFFFF;
  min-height: clamp(520px, 70vh, 680px); display: flex; align-items: flex-end; padding-block: 56px var(--pad-sec); }
.blog-hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.blog-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: blog-hero-settle 1.6s cubic-bezier(.2, .8, .2, 1) both; }
.blog-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(15, 61, 62, .95) 0%, rgba(15, 61, 62, .90) 48%, rgba(15, 61, 62, .62) 100%); }
@keyframes blog-hero-settle { from { transform: scale(1.06); } to { transform: none; } }
.blog-hero > .wrap { width: 100%; }
.blog-hero .blog-category-badge { display: inline-block; margin: 0 0 20px; padding: 4px 10px; border: 1px solid #FFFFFF; color: #FFFFFF;
  font-family: var(--f-mono); font-size: var(--t-13); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.blog-hero .blog-category-badge b { color: var(--yellow); font-weight: 500; }
.blog-hero h1 { max-width: 20ch; font-size: var(--t-72); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; color: #FFFFFF; text-box-trim: trim-both; }
.blog-hero__excerpt { max-width: 62ch; margin: 24px 0 40px; font-size: var(--t-23); line-height: 1.45; color: var(--on-dark-2); }

/* meta strip = drawing title block on dark (§0 motif ④) */
.blog-meta { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; max-width: 1080px; border: 1px solid rgba(255, 255, 255, .5); }
.blog-meta-item { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 10px 16px; border-right: 1px solid rgba(255, 255, 255, .5); color: #FFFFFF; }
.blog-meta-item:last-child { border-right: 0; }
.blog-meta-item span { font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.blog-meta-item b { font-size: var(--t-17); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-meta-item--author { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.blog-meta-item--author > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.blog-meta-item--author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1.5px solid #FFFFFF; flex: 0 0 44px; }
.blog-meta-item--author a { color: #FFFFFF; text-decoration: none; }
.blog-meta-item--author a:hover { text-decoration: underline; }
@media (max-width: 1000px) {
  .blog-hero { min-height: 0; padding-block: 40px var(--pad-sec); }
  .blog-hero h1 { font-size: var(--t-40); max-width: none; }
  .blog-hero__excerpt { font-size: var(--t-17); margin: 16px 0 28px; }
  .blog-meta { grid-template-columns: 1fr 1fr; }
  .blog-meta-item b { white-space: normal; }
  .blog-meta-item--author { gap: 10px; padding-inline: 12px; }
  .blog-meta-item--author img { width: 36px; height: 36px; flex-basis: 36px; }
  .blog-meta-item:nth-child(2n) { border-right: 0; }
  .blog-meta-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .5); }
  .breadcrumb [aria-current] { max-width: 22ch; }
}

/* ---------- two-column body ---------- */
.article-body { background-color: #FFFFFF; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 72px; align-items: start; }
.article-main { min-width: 0; max-width: 760px; }
.article-excerpt { margin: 0 0 40px; padding: 20px 0 20px 24px; border-left: 4px solid var(--green); }
.article-excerpt span { display: block; margin-bottom: 8px; font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.article-excerpt p { margin: 0; font-size: var(--t-23); line-height: 1.45; font-weight: 500; color: var(--char); }
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .article-main { max-width: none; }
  .article-excerpt p { font-size: var(--t-17); }
}

/* ---------- tags + share ---------- */
.article-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--line-white); }
.article-tags > span { font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.article-tags > b { font-family: var(--f-mono); font-size: var(--t-13); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 0; }
.share-row > span { font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.share-row a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-white); border-radius: var(--radius);
  color: var(--char); text-decoration: none; font-weight: 600; font-size: var(--t-13); letter-spacing: .04em; text-transform: uppercase; }
.share-row a:hover { border-color: var(--green); color: var(--green); }
.share-row svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- author card ---------- */
.author-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; margin: 48px 0 0; padding: 24px; background: #F4F1EA; border: 1px solid var(--line-warm); border-radius: var(--radius); }
.author-card img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; }
.author-card__label { margin: 0 0 4px; font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.author-card h3 { margin: 0 0 12px; font-size: var(--t-23); }
.author-card h3 a { color: var(--char); text-decoration: none; }
.author-card h3 a:hover { color: var(--green); }
.author-card h3 small { font-size: var(--t-17); font-weight: 500; color: var(--muted); }
.author-card p { margin: 0 0 12px; color: var(--char); }
.author-card .link-arrow { font-size: var(--t-17); }
@media (max-width: 600px) { .author-card { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; } .author-card img { width: 72px; height: 72px; } }

/* ---------- inquiry band (post / blog / author) ---------- */
.post-inquiry { background-color: #0F3D3E; background-size: cover; background-position: center; color: var(--on-dark-2); }
.post-inquiry .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.post-inquiry .info { display: grid; gap: 20px; align-content: start; }
.post-inquiry .info h2 { color: #FFFFFF; }
.post-inquiry .info p { margin: 0; color: var(--on-dark-2); }
.post-inquiry .anna { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; }
.post-inquiry .anna img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; }
.post-inquiry .anna b { display: block; color: #FFFFFF; font-size: var(--t-23); }
.post-inquiry .anna a { font-family: var(--f-mono); font-size: var(--t-17); color: #FFFFFF; }
.post-inquiry dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.post-inquiry dt { font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); padding-top: 3px; }
.post-inquiry dd { margin: 0; color: #FFFFFF; }
.post-inquiry .tb__cell--wide { grid-column: span 2; }
.post-inquiry .tb__cell--full { grid-column: 1 / -1; }
.post-inquiry textarea { field-sizing: content; min-height: 88px; }
@media (max-width: 1000px) { .post-inquiry .grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .blog-hero__media img { animation: none; transform: none; }
}