/* =========================================================
   MINISTRY OF TINKERING — screen.css
   ========================================================= */

:root {
  --bg:           #07090f;
  --bg-mid:       #0d1122;
  --bg-dark:      #060810;
  --bg-hover:     #0d1020;
  --border:       #1e2438;
  --gold:         #c8a84b;
  --gold-dim:     #6b5820;
  --text:         #d4c9a8;
  --text-mid:     #a09880;
  --text-dim:     #7a7260;
  --text-faint:   #4a4a3a;
  --green:        #3d9e5e;
  --green-border: #1a3a24;
  --font-serif:   'EB Garamond', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: clamp(16px, 0.55vw + 13px, 22px); }
body { background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
button { cursor: pointer; font-family: var(--font-mono); background: none; border: none; color: inherit; }
main { flex: 1; }

/* --- Ticker --------------------------------------------- */
.mot-ticker { background: var(--bg-mid); height: 26px; display: flex; align-items: center; flex-shrink: 0; font-size: 0.5625rem; letter-spacing: 0.15em; color: var(--text-dim); overflow: hidden; white-space: nowrap; z-index: 100; }
.mot-ticker--fwd { border-bottom: 1px solid var(--gold-dim); position: sticky; top: 0; }
.mot-ticker--rev { border-top: 1px solid var(--gold-dim); position: sticky; bottom: 0; }
.mot-ticker__inner { display: inline-block; animation: ticker 28s linear infinite; }
.mot-ticker--rev .mot-ticker__inner { animation-direction: reverse; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.gold { color: var(--gold); }

/* --- Nav ------------------------------------------------ */
.mot-nav { padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.mot-nav__brand { display: flex; align-items: center; gap: 14px; }
.mot-nav__logo { width: 46px; height: 46px; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.mot-nav__logo img { width: 100%; height: 100%; object-fit: contain; }
.mot-nav__logo-placeholder { color: var(--gold); font-size: 1.25rem; }
.mot-nav__title { display: block; font-family: var(--font-serif); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }
.mot-nav__subtitle { display: block; font-size: 0.5625rem; color: var(--text-dim); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 2px; }
.mot-nav__links { display: flex; gap: 24px; }
.mot-nav__link { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); transition: color 0.15s; }
.mot-nav__link:hover { color: var(--text); }
.mot-nav__link.active { color: var(--gold); }

/* On post pages, pin the nav below the top ticker so it stays visible while reading. */
.page-post .mot-nav { position: sticky; top: 26px; z-index: 99; background: var(--bg); }

/* --- Page header ---------------------------------------- */
.mot-page-header { padding: 28px 32px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.mot-page-header__tag { font-size: 0.5625rem; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
.mot-page-header__title { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; }
.mot-page-header__filter-label { font-size: 0.5625rem; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; text-align: right; }

/* --- Tags ----------------------------------------------- */
.mot-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mot-tag { font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--border); color: var(--text-dim); transition: border-color 0.15s, color 0.15s; }
.mot-tag:hover, .mot-tag--on { border-color: var(--gold-dim); color: var(--gold); }

/* --- Grids ---------------------------------------------- */
.mot-grid { display: grid; }
.mot-grid--projects { grid-template-columns: repeat(3, 1fr); }
.mot-grid--gallery  { grid-template-columns: repeat(5, 1fr); }

/* --- Project cards -------------------------------------- */
.mot-card { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; transition: background 0.15s; }
.mot-card:nth-child(3n) { border-right: none; }
.mot-card:hover { background: var(--bg-hover); }
.mot-card__link { display: block; }
.mot-card__image { width: 100%; max-width: 280px; aspect-ratio: 4 / 3; margin: 18px auto 0; overflow: hidden; background: var(--bg-dark); }
.mot-card__image img { width: 100%; height: 100%; object-fit: cover; }
.mot-card__image-placeholder { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 10px; font-size: 0.5rem; letter-spacing: 0.15em; color: rgba(200,168,75,0.3); background: repeating-linear-gradient(0deg,transparent,transparent 21px,rgba(200,168,75,0.04) 21px,rgba(200,168,75,0.04) 22px), repeating-linear-gradient(90deg,transparent,transparent 21px,rgba(200,168,75,0.04) 21px,rgba(200,168,75,0.04) 22px); }
.mot-card__body { padding: 18px 20px; }
.mot-card__tags { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.mot-card__tag { font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green-border); padding: 2px 7px; }
.mot-card__title { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 400; margin-bottom: 8px; line-height: 1.3; }
.mot-card__blurb { font-size: 0.625rem; color: var(--text-dim); line-height: 1.75; margin-bottom: 14px; }
.mot-card__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.5625rem; }
.mot-card__date { color: var(--text-faint); }
.mot-card__cta { color: var(--gold); letter-spacing: 0.08em; }

/* --- Gallery items -------------------------------------- */
.mot-gallery-item { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.mot-grid--gallery > .mot-gallery-item:nth-child(5n) { border-right: none; }
.mot-gallery-item__thumb { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-dark); transition: filter 0.2s; }
.mot-gallery-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mot-gallery-item__placeholder { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 10px; font-size: 0.5rem; letter-spacing: 0.15em; color: rgba(200,168,75,0.3); box-sizing: border-box; }
.mot-gallery-item:hover .mot-gallery-item__thumb { filter: brightness(0.7); }
.mot-gallery-item__tag { position: absolute; top: 10px; left: 10px; font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green-border); padding: 2px 7px; background: var(--bg); }
.mot-gallery-item__caption { padding: 10px 12px 12px; border-top: 1px solid var(--border); flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.mot-gallery-item__title { font-family: var(--font-serif); font-size: 0.8125rem; line-height: 1.3; color: var(--text); }
.mot-gallery-item__ref { font-size: 0.5rem; color: var(--gold); letter-spacing: 0.1em; }

/* --- Lightbox ------------------------------------------- */
.mot-lightbox { position: fixed; inset: 0; background: rgba(4,5,10,0.93); display: flex; align-items: center; justify-content: center; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.mot-lightbox.open { opacity: 1; pointer-events: all; }
.mot-lightbox__inner { background: var(--bg); border: 1px solid var(--border); width: 96%; max-width: 1600px; max-height: 95vh; position: relative; display: flex; flex-direction: column; }
.mot-lightbox__close { position: absolute; top: 14px; right: 18px; font-size: 0.6875rem; color: var(--text-dim); letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.15s; z-index: 2; }
.mot-lightbox__close:hover { color: var(--gold); }
.mot-lightbox__header { padding: 22px 28px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.mot-lightbox__ref { font-size: 0.5625rem; color: var(--text-dim); letter-spacing: 0.2em; margin-bottom: 6px; }
.mot-lightbox__title { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 400; margin-bottom: 4px; }
.mot-lightbox__sub { font-size: 0.6875rem; color: var(--text-dim); margin-top: 4px; }
.mot-lightbox__tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mot-lightbox__tag { font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green-border); padding: 2px 7px; }
.mot-lightbox__split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.7fr 1fr; }
.mot-lightbox__media { border-right: 1px solid var(--border); overflow-y: auto; }
.mot-lightbox__info { overflow-y: auto; padding: 22px 28px; }
.mot-lightbox__images { display: grid; grid-template-columns: 1fr 1fr; }
.mot-lightbox__img { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-dark); display: flex; flex-direction: column; }
.mot-lightbox__img:nth-child(2n) { border-right: none; }
.mot-lightbox__img-frame { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.mot-lightbox__img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s; }
.mot-lightbox__img-frame:hover img { transform: scale(1.03); }
.mot-lightbox__img-cap { padding: 8px 12px 10px; font-size: 0.5625rem; color: var(--text-dim); line-height: 1.5; border-top: 1px solid var(--border); }
.mot-lightbox__img-cap:empty { display: none; }
.mot-lightbox__content { font-size: 0.6875rem; color: var(--text-mid); line-height: 1.9; }
.mot-lightbox__content p { margin-bottom: 12px; }
.mot-lightbox__content h2 { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; color: var(--text); margin: 18px 0 8px; }
.mot-lightbox__content h3 { font-family: var(--font-serif); font-size: 0.875rem; font-weight: 400; color: var(--text); margin: 14px 0 6px; }
.mot-lightbox__content h2:first-child, .mot-lightbox__content h3:first-child { margin-top: 0; }
.mot-lightbox__content ul, .mot-lightbox__content ol { margin: 0 0 12px 18px; padding: 0; }
.mot-lightbox__content li { margin-bottom: 4px; }
.mot-lightbox__content a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
.mot-lightbox__content a:hover { border-bottom-color: var(--gold); }
.mot-lightbox__content code { font-size: 0.625rem; color: var(--gold); background: var(--bg-dark); padding: 1px 5px; }
.mot-lightbox__content strong { color: var(--text); font-weight: 600; }
.mot-lightbox__content em { color: var(--text); font-style: italic; }
.mot-lightbox__specs { list-style: none; margin: 0; padding: 18px 24px 22px; border-bottom: 1px solid var(--border); }
.mot-lightbox__specs:empty { display: none; }
.mot-lightbox__spec { padding: 4px 0; font-size: 0.6875rem; line-height: 1.7; color: var(--text-mid); }
.mot-lightbox__spec-label { color: var(--text-dim); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; margin-right: 10px; }
.mot-lightbox__spec-value { color: var(--text); }

/* --- Homepage ------------------------------------------- */
.mot-home__hero { display: grid; grid-template-columns: 1fr 1fr; height: 520px; border-bottom: 1px solid var(--border); }
.mot-home__boot { border-right: 1px solid var(--border); background: var(--bg-dark); padding: 18px 20px; height: 100%; overflow: hidden; box-sizing: border-box; position: relative; cursor: text; }
.mot-home__boot-label { font-size: 0.5rem; letter-spacing: 0.2em; color: var(--text-dim); margin-bottom: 12px; text-transform: uppercase; }

/* Terminal body ------------------------------------------- */
.mot-term { font-size: 0.625rem; line-height: 1.65; height: calc(100% - 28px); overflow: hidden; display: flex; flex-direction: column; }
.mot-term__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.mot-term__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.mot-term__neofetch { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-bottom: 10px; }
.mot-term__logo { color: var(--gold); white-space: pre; font-family: var(--font-mono); font-size: 0.5625rem; line-height: 1.2; }
.mot-term__specs { font-family: var(--font-mono); }
.mot-term__spec { display: flex; gap: 8px; }
.mot-term__spec-key { color: var(--gold); min-width: 80px; }
.mot-term__spec-val { color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mot-term__spec-rule { color: var(--text-faint); margin: 4px 0; letter-spacing: 0.05em; }
.mot-term__history { min-height: 0; }
.mot-term__line { white-space: pre-wrap; word-break: break-word; }
.mot-term__line--dim    { color: var(--text-faint); }
.mot-term__line--info   { color: var(--text-mid); }
.mot-term__line--ok     { color: var(--green); }
.mot-term__line--warn   { color: var(--gold); }
.mot-term__line--err    { color: #a33030; }
.mot-term__line--echo   { color: var(--text-dim); }
.mot-term__line--echo .mot-term__prompt { color: var(--gold); }
.mot-term__prompt-line { display: flex; gap: 6px; align-items: baseline; }
.mot-term__prompt { color: var(--gold); flex-shrink: 0; }
.mot-term__buffer { color: var(--text); white-space: pre; }
.mot-term__caret { display: inline-block; width: 7px; height: 11px; background: var(--text); vertical-align: middle; animation: blink 1s step-end infinite; margin-left: 1px; }
.mot-term__caret--idle { background: var(--text-dim); }
.mot-term__input { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; }
.mot-term__link { color: var(--gold); border-bottom: 1px dotted var(--gold-dim); transition: border-color 0.15s; }
.mot-term__link:hover { border-color: var(--gold); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.mot-home__intro { padding: 18px 20px; display: flex; flex-direction: column; height: 100%; background: var(--bg-dark); box-sizing: border-box; }
.mot-home__intro-head { margin-bottom: 14px; }
.mot-home__eyebrow { font-size: 0.5rem; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
.mot-home__headline { font-family: var(--font-serif); font-size: 1.625rem; font-weight: 400; line-height: 1.15; }
.mot-home__headline em { color: var(--gold); font-style: italic; }
.mot-home__rule { display: none; }                  /* no longer used */
.mot-home__body { display: none; }                  /* no longer used */

/* Archive tree --------------------------------------------- */
.mot-home__archive { flex: 1; overflow: hidden; display: flex; flex-direction: column; margin-bottom: 14px; }
.mot-home__archive-label { font-size: 0.5rem; letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 10px; }
.mot-home__archive-lines { font-size: 0.625rem; line-height: 1.7; flex: 1; overflow-y: auto; overflow-x: hidden; }
.archive-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-line--blank { height: 0.5em; }
.archive-line--month { color: var(--gold); letter-spacing: 0.08em; margin-top: 2px; }
.archive-line--post  { color: var(--text-mid); }
.archive-line__link { display: inline-block; width: 100%; color: inherit; transition: color 0.12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-line__link:hover { color: var(--gold); }
.archive-line__link:hover .archive-line__title { color: var(--gold); }
.archive-line__branch { color: var(--text-faint); }
.archive-line__title { color: var(--text); }
.archive-line__tags { color: var(--text-faint); font-size: 0.5625rem; margin-left: 4px; }

/* Random buttons (bottom row of intro panel) --------------- */
.mot-home__random-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.mot-home__random-btn { font-size: 0.5rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); padding: 5px 9px; transition: border-color 0.15s, color 0.15s; }
.mot-home__random-btn:hover { border-color: var(--gold-dim); color: var(--gold); }
/* Inline terminal table (for ls/help/whoami rendered in history) */
.mot-term__kv { display: grid; grid-template-columns: 120px 1fr; gap: 2px 12px; margin: 4px 0 8px; }
.mot-term__kv dt { color: var(--gold); }
.mot-term__kv dd { color: var(--text); }
.mot-term__heading { color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.5625rem; margin: 6px 0 4px; }
.mot-term__row { display: grid; grid-template-columns: 32px 72px 1fr auto; gap: 10px; padding: 2px 0; align-items: baseline; }
.mot-term__row-idx   { color: var(--text-faint); }
.mot-term__row-ref   { color: var(--text-dim); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; }
.mot-term__row-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mot-term__row-title a { color: var(--text); border-bottom: 1px dotted var(--text-faint); transition: color 0.15s, border-color 0.15s; }
.mot-term__row-title a:hover { color: var(--gold); border-color: var(--gold); }
.mot-term__row-meta  { color: var(--text-faint); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* --- Post layout — grid spanning header + article + sidebar,
       with pattern panels running full height on both sides --- */
.mot-post { display: grid; grid-template-columns: 1fr minmax(0, 960px) 280px 1fr; align-items: start; }
#mot-pattern-l { grid-column: 1; grid-row: 1 / span 2; }
#mot-pattern-r { grid-column: 4; grid-row: 1 / span 2; }
.mot-post__header    { grid-column: 2 / span 2; grid-row: 1; }
.mot-post__article   { grid-column: 2;          grid-row: 2; }
.mot-post__sidebar   { grid-column: 3;          grid-row: 2; }

/* --- Simple variant for pages without sidebar/pattern (e.g. About) --- */
.mot-post--simple { display: block; max-width: 960px; margin: 0 auto; }
.mot-post--simple .mot-post__header { grid-column: auto; border-left: none; border-right: none; text-align: left; padding: 36px 32px 28px; }
.mot-post--simple .mot-post__header .mot-post__breadcrumb { justify-content: flex-start; }
.mot-post--simple .mot-post__header .mot-post__title { margin-left: 0; margin-right: 0; }
.mot-post--simple .mot-post__article--full { grid-column: auto; max-width: 740px; margin: 0 auto; }

/* --- Post header (centred in middle columns) ------------ */
.mot-post__header { padding: 48px 40px 36px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--bg); text-align: center; }
.mot-post__breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px; font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.mot-post__breadcrumb a { color: var(--text-dim); }
.mot-post__breadcrumb a:hover { color: var(--gold); }
.mot-post__breadcrumb-sep { color: var(--border); }
.mot-post__title { font-family: var(--font-serif); font-size: 2.875rem; font-weight: 400; line-height: 1.15; margin: 0 auto 18px; max-width: 720px; }
.mot-post__header-tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.mot-post__tag { font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green-border); padding: 2px 7px; }

/* --- Article ---------------------------------------------- */
.mot-post__article { padding: 36px 40px 60px 36px; border-right: 1px solid var(--border); border-left: 1px solid var(--border); min-width: 0; background: var(--bg); }
.mot-post__article--full { grid-column: 1 / -1; border-right: none; border-left: none; max-width: 740px; }
.mot-post__article h2 { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 400; color: var(--text); margin: 40px 0 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.mot-post__article > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.mot-post__article h3 { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 400; margin: 28px 0 10px; }
.mot-post__article p { font-size: 0.6875rem; color: var(--text-mid); line-height: 1.95; margin: 0 0 16px; }
.mot-post__article ul, .mot-post__article ol { font-size: 0.6875rem; color: var(--text-mid); line-height: 1.9; margin: 0 0 16px; padding-left: 20px; }
.mot-post__article li { margin-bottom: 4px; }
.mot-post__article a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
.mot-post__article a:hover { border-color: var(--gold); }
.mot-post__article strong { color: var(--text); font-weight: 400; }
.mot-post__article hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.mot-post__article blockquote { border-left: 2px solid var(--gold-dim); padding: 10px 18px; margin: 20px 0; color: var(--text-dim); font-style: italic; font-family: var(--font-serif); font-size: 0.9375rem; }
.mot-post__article code { background: var(--bg-mid); border: 1px solid var(--border); padding: 1px 6px; font-size: 0.625rem; color: var(--gold); font-family: var(--font-mono); }
.mot-post__article pre { background: var(--bg-dark); border: 1px solid var(--border); border-left: 2px solid var(--gold-dim); padding: 16px 18px; margin: 20px 0; overflow-x: auto; }
.mot-post__article pre code { background: none; border: none; padding: 0; font-size: 0.625rem; color: var(--text); line-height: 1.7; }
.mot-post__article img { display: block; max-width: 100%; width: auto; height: auto; border: 1px solid var(--border); margin: 24px 0; cursor: zoom-in; transition: opacity 0.15s; }
.mot-post__article img:hover { opacity: 0.85; }
.mot-post__article figure { max-width: 100%; margin: 24px 0; }
.mot-post__article figure img { margin: 0; }
.mot-post__article figcaption { font-size: 0.6875rem; color: var(--text-dim); letter-spacing: 0.08em; margin-top: 8px; text-align: center; }

/* --- Sidebar -------------------------------------------- */
.mot-post__sidebar { padding: 24px 20px; position: sticky; top: 105px; height: fit-content; background: var(--bg); border-right: 1px solid var(--border); }
.mot-post__toc-label { font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.mot-post__toc a { display: block; font-size: 0.625rem; color: var(--text-dim); padding: 5px 0; border-bottom: 1px solid var(--bg-mid); line-height: 1.4; transition: color 0.15s; }
.mot-post__toc a:hover, .mot-post__toc a.active { color: var(--gold); }
.mot-post__toc a.h3 { padding-left: 12px; font-size: 0.5625rem; }
.mot-post__sidebar-rule { width: 100%; height: 1px; background: var(--border); margin: 20px 0; }
.mot-post__sidebar-meta { font-size: 0.5625rem; color: var(--text-faint); line-height: 2.2; }
.mot-post__sidebar-key { display: inline-block; width: 50px; }
.mot-post__sidebar-meta span { color: var(--text-dim); }
.mot-post__back { font-size: 0.5625rem; color: var(--gold); letter-spacing: 0.08em; transition: color 0.15s; }
.mot-post__back:hover { color: var(--text); }

/* --- Wavy pattern (post side gutters) -------------------- */
.mot-post__pattern { position: fixed; top: 105px; height: calc(100vh - 131px); width: calc((100vw - 1240px) / 2); overflow: hidden; pointer-events: none; }
#mot-pattern-l { left: 0; }
#mot-pattern-r { right: 0; }
.mot-post__pattern canvas { display: block; width: 100%; height: 100%; }

/* --- Responsive ----------------------------------------- */
@media (max-width: 900px) {
  .mot-home__hero { grid-template-columns: 1fr; height: auto; }
  .mot-home__boot { border-right: none; border-bottom: 1px solid var(--border); height: 420px; }
  .mot-home__intro { height: auto; min-height: 320px; }
  .mot-term__neofetch { grid-template-columns: 1fr; }
  .mot-term__logo { text-align: center; }
  .mot-term__row { grid-template-columns: 28px 1fr; }
  .mot-term__row-ref { display: none; }
  .mot-term__row-meta { display: none; }
  .mot-term__kv { grid-template-columns: 90px 1fr; }
  .mot-home__section { border-right: none; }
  .mot-grid--projects { grid-template-columns: repeat(2,1fr); }
  .mot-card:nth-child(3n) { border-right: 1px solid var(--border); }
  .mot-card:nth-child(2n) { border-right: none; }
  .mot-grid--gallery { grid-template-columns: repeat(3,1fr); }
  .mot-grid--gallery > .mot-gallery-item:nth-child(5n) { border-right: 1px solid var(--border); }
  .mot-grid--gallery > .mot-gallery-item:nth-child(3n) { border-right: none; }
  .mot-post { grid-template-columns: 1fr; }
  .mot-post__header { grid-column: 1; grid-row: auto; border-left: none; border-right: none; padding: 24px 20px 20px; text-align: left; }
  .mot-post__article { grid-column: 1; grid-row: auto; border-right: none; border-left: none; padding: 24px 20px 40px; }
  .mot-post__sidebar { display: none; border-right: none; }
  .mot-post__pattern { display: none; }
  .mot-post__breadcrumb { justify-content: flex-start; }
  .mot-post__title { margin-left: 0; margin-right: 0; }
  .mot-post__header-tags { justify-content: flex-start; }
  .mot-page-header { flex-direction: column; align-items: flex-start; }
  .mot-tags { justify-content: flex-start; }
  .mot-nav { padding: 14px 20px; }
  .mot-lightbox__split { grid-template-columns: 1fr; overflow-y: auto; }
  .mot-lightbox__media { border-right: none; border-bottom: 1px solid var(--border); overflow-y: visible; }
  .mot-lightbox__info { overflow-y: visible; }
}
@media (max-width: 600px) {
  .mot-grid--projects { grid-template-columns: 1fr; }
  .mot-grid--gallery { grid-template-columns: repeat(2,1fr); }
  .mot-grid--gallery > .mot-gallery-item:nth-child(3n) { border-right: 1px solid var(--border); }
  .mot-grid--gallery > .mot-gallery-item:nth-child(2n) { border-right: none; }
  .mot-lightbox__images { grid-template-columns: 1fr; }
  .mot-lightbox__img { border-right: none; }
  .mot-nav { flex-direction: column; gap: 12px; padding: 14px 16px; }
  .mot-nav__brand { justify-content: center; }
  .mot-nav__subtitle { display: none; }
  .mot-nav__links { gap: 16px; flex-wrap: wrap; justify-content: center; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .mot-post { grid-template-columns: minmax(0, 960px) 280px; justify-content: center; }
  .mot-post__header { grid-column: 1 / span 2; grid-row: 1; }
  .mot-post__article { grid-column: 1; grid-row: 2; border-left: none; }
  .mot-post__sidebar { grid-column: 2; grid-row: 2; border-right: none; }
  .mot-post__pattern { display: none; }
}

/* --- 404 ------------------------------------------------ */
.mot-404 { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 60px 32px; }
.mot-404__inner { max-width: 540px; width: 100%; }
.mot-404__label { font-size: 0.5rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.mot-404__code { font-family: var(--font-serif); font-size: 8rem; font-weight: 400; line-height: 1; color: var(--text); margin-bottom: 16px; }
.mot-404__rule { width: 48px; height: 1px; background: var(--gold-dim); margin-bottom: 24px; }
.mot-404__msg { font-size: 0.75rem; color: var(--text-dim); line-height: 1.9; margin-bottom: 28px; }
.mot-404__redacted { background: var(--text-dim); color: var(--text-dim); cursor: default; transition: background 0.2s, color 0.2s; padding: 0 4px; }
.mot-404__redacted:hover { background: transparent; color: var(--gold); }
.mot-404__terminal { font-size: 0.625rem; color: var(--green); line-height: 2; margin-bottom: 32px; min-height: 120px; }
.mot-404__home { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold-dim); padding-bottom: 2px; transition: border-color 0.15s; }
.mot-404__home:hover { border-color: var(--gold); }

/* --- Post image lightbox -------------------------------- */
.mot-imglb { position: fixed; inset: 0; background: rgba(4,5,10,0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.2s; padding: 40px; cursor: zoom-out; }
.mot-imglb.open { opacity: 1; pointer-events: all; }
.mot-imglb__close { position: absolute; top: 20px; right: 24px; font-size: 0.6875rem; color: var(--text-dim); letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.15s; z-index: 1; }
.mot-imglb__close:hover { color: var(--gold); }
.mot-imglb__img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border: 1px solid var(--gold-dim); object-fit: contain; cursor: zoom-out; }
.mot-imglb__caption { font-size: 0.8125rem; color: var(--text-dim); letter-spacing: 0.08em; margin-top: 16px; text-align: center; max-width: 720px; }