/* Shared article/project presentation. Load after styles.css.
   Add both `reading portfolio-reading` to the outer article element.
   Change these tokens once to update every detail page. */
.reading.portfolio-reading {
  --reading-width: 1206px;
  --reading-measure: 92ch;
  --reading-font-size: 16px;
  --reading-text: #c9cbd0;
  --reading-emphasis: #f4f3ee;
  --reading-accent: var(--gold, #e6bd78);
  --reading-surface: #1a1c1f;
  --reading-fade: 26px;
  --reading-outset: 44px;
  --reading-code-shadow: 0 8px 24px rgb(0 0 0 / 34%), 0 2px 6px rgb(0 0 0 / 22%);
  position: relative;
  isolation: isolate;
  max-width: var(--reading-width);
  margin: 40px auto 88px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--reading-font-size);
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.portfolio-reading::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--reading-outset));
  z-index: -1;
  background: var(--reading-surface);
  border-radius: 44px;
  filter: blur(var(--reading-fade));
  pointer-events: none;
}
.reading.portfolio-reading h1 { font-size:clamp(2rem,3.6vw,3rem); line-height:1.2; letter-spacing:-.035em; max-width:28ch; margin:0 0 32px; text-wrap:balance; }
.reading.portfolio-reading h2 { font-size:28px; line-height:1.3; letter-spacing:-.025em; margin:44px 0 18px; }
.reading.portfolio-reading h3 { font-size:21px; line-height:1.4; letter-spacing:-.015em; margin:32px 0 14px; }
.reading.portfolio-reading h4 { font-size:18px; line-height:1.4; margin:28px 0 12px; }
.reading.portfolio-reading :is(h5,h6) { font-size:16px; line-height:1.5; margin:24px 0 12px; }
.reading.portfolio-reading :is(h1,h2,h3,h4,h5,h6) { font-weight:700; color:var(--reading-emphasis); }
.reading.portfolio-reading :is(p,li,dd) { color:var(--reading-text); }
.reading.portfolio-reading p { max-width:var(--reading-measure); margin:0 0 1.2em; }
.reading.portfolio-reading :is(strong,b) { font-weight:700; color:var(--reading-emphasis); }
.reading.portfolio-reading a { color:var(--reading-accent); text-decoration:underline; text-underline-offset:3px; }
.reading.portfolio-reading a :is(strong,b) { color:inherit; }
.reading.portfolio-reading hr { border:0; border-top:1px solid var(--line,#303236); margin:40px 0 0; }
.reading.portfolio-reading hr+h2 { margin-top:28px; }
.reading.portfolio-reading :is(ul,ol) { max-width:var(--reading-measure); padding-left:24px; margin:20px 0 28px; }
.reading.portfolio-reading li { padding-left:5px; margin-bottom:16px; }
.reading.portfolio-reading li::marker { color:var(--reading-accent); }
.reading.portfolio-reading ul>li { position:relative; }
.reading.portfolio-reading ul>li::marker { color:transparent; }
.reading.portfolio-reading ul>li::before { content:""; position:absolute; left:-16px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--reading-accent); box-shadow:0 0 7px 1px rgb(239 169 81 / 35%); pointer-events:none; }
.reading.portfolio-reading :not(pre)>code { font-family:Consolas,'Courier New',monospace; font-size:.92em; color:var(--reading-accent); background:rgb(230 189 120 / 8%); border-radius:4px; padding:2px 5px; box-decoration-break:clone; -webkit-box-decoration-break:clone; overflow-wrap:anywhere; }
/* Imported WordPress inline colors must not override the shared palette. */
.reading.portfolio-reading :is(code,strong,b,a) mark { color:inherit!important; background:transparent!important; }
.reading.portfolio-reading .wp-block-kevinbatdorf-code-block-pro { margin:24px 0 28px; border:1px solid var(--line,#303236); border-radius:8px; overflow:hidden; box-shadow:var(--reading-code-shadow); }
.reading.portfolio-reading .wp-block-kevinbatdorf-code-block-pro>span:not(.code-block-pro-copy-button) { font-family:Manrope,sans-serif; font-size:12px; letter-spacing:.04em; padding:9px 20px!important; background:#202328!important; margin:0!important; border-bottom:1px solid var(--line,#303236); }
.reading.portfolio-reading pre { margin:24px 0 28px; padding:20px 24px; font-size:14px; line-height:1.7; letter-spacing:0; border:1px solid var(--line,#303236); border-radius:8px; white-space:pre; overflow:auto; overflow-wrap:normal; tab-size:4; max-width:100%; background:#24292e; box-shadow:var(--reading-code-shadow); }
.reading.portfolio-reading .wp-block-kevinbatdorf-code-block-pro pre { margin:0; border:0; border-radius:0; box-shadow:none; }
.reading.portfolio-reading pre code { font-family:Consolas,'Courier New',monospace; font-size:inherit; color:inherit; background:none; padding:0; }
.reading.portfolio-reading .wp-block-columns { align-items:center; gap:40px; }
.reading.portfolio-reading figure { margin:24px 0; }
.reading.portfolio-reading .concept-dictionary { max-width:var(--reading-measure); margin:24px 0; }
.reading.portfolio-reading .concept-dictionary>div { padding:16px 0; border-bottom:1px solid var(--line,#303236); }
.reading.portfolio-reading .concept-dictionary dt { font-weight:700; color:var(--reading-emphasis); margin-bottom:4px; }
.reading.portfolio-reading .concept-dictionary dd { margin:0; }
.reading.portfolio-reading .article-date { font-size:14px; color:var(--muted,#b0b1b6); }
/* Optional opening layout; other image/video columns retain their own sizing. */
.reading.portfolio-reading .reading-intro { display:grid; grid-template-columns:minmax(0,1fr) 33%; gap:40px; }
.reading.portfolio-reading .reading-intro .wp-block-image figure { max-width:none; width:100%; margin:0 0 0 auto; }
.reading.portfolio-reading .reading-intro .wp-block-image img { display:block; width:100%; height:auto; }
@media(max-width:760px) {
  .reading.portfolio-reading::before { inset:-28px -18px; }
  .reading.portfolio-reading h2 { font-size:25px; }
  .reading.portfolio-reading .wp-block-columns { gap:8px; }
  .reading.portfolio-reading pre { padding:16px; font-size:13px; }
  .reading.portfolio-reading .reading-intro { grid-template-columns:minmax(0,1fr); gap:20px; }
  .reading.portfolio-reading .reading-intro .wp-block-image figure { width:min(100%,400px); }
}
@media(max-width:680px) { .reading.portfolio-reading { margin-top:24px; } }