/* Option 03: a terminal escaped into a flyer wall. Keep the editorial
   templates intact; this composition is scoped to Ghost's home route. */
/* IBM VGA subset: VileR, https://int10h.org/oldschool-pc-fonts/
   INT10h.org © 2015-2020 VileR. CC BY-SA 4.0; see ../fonts/LICENSE-FONT.md. */
@font-face { font-family: "Local VGA"; src: url("../fonts/ibm-vga-8x16.woff2") format("woff2"); font-display: swap; }
.option-three { --terminal-font: "Local VGA", "Courier New", monospace; }
.home-template.option-three { font-size: 1rem; }
.home-template.option-three .app-col { max-width: 1680px; margin: auto; padding: 0 22px; background: transparent; box-shadow: none; }
.home-template.option-three .paint-layer { opacity: .17; }
.home-template.option-three .site-main { z-index: 2; }
.home-template.option-three .site-footer { max-width: 960px; margin: 3rem auto 0; }
.signal-strip { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #444; padding: 9px 0; font: .75rem/1.5 var(--font-mono); color: var(--text-dim); }
.wall-masthead { min-height: 244px; display: grid; grid-template-columns: 27% 1fr 150px; gap: 20px; align-items: center; position: relative; z-index: 1; }
.mascot-note { align-self: start; justify-self: end; max-width: 8ch; white-space: pre-line; color: var(--acid); font: 1.35rem/1.1 var(--terminal-font); padding: 17px 10px; transform: rotate(-5deg); }
.wall-brand { min-width: 0; }
.wall-brand a { display: block; width: fit-content; font: clamp(5rem, 12vw, 11.3rem)/.9 var(--terminal-font); letter-spacing: -.04em; text-decoration: none; color: var(--cyan); text-shadow: -3px 0 var(--magenta), 2px 3px #036774; }
.wall-brand a span { color: var(--magenta); }
.wall-brand p { color: var(--acid); font: clamp(1.5rem, 3.2vw, 3rem)/1 var(--terminal-font); margin: .2em 0 0; text-align: center; letter-spacing: .1em; }
.wall-masthead nav { display: flex; flex-direction: column; align-items: start; gap: 5px; font: 1.15rem/1.1 var(--terminal-font); }
.wall-masthead nav a { padding: 4px; text-decoration: none; }
.wall-masthead nav a:hover { color: #000; background: var(--acid); }
.home-template.option-three .ascii-backdrop { display: block; left: max(120px, calc((100vw - 1640px) / 2 + 120px)); right: auto; top: 40px; width: 450px; padding: 0; font-size: 6.25px; line-height: 1.14; color: var(--acid); opacity: .92; transform: rotate(-7deg) scaleY(1.27); transform-origin: top left; text-shadow: 1px 0 var(--acid), -2px 2px #5f6300; overflow: hidden; }
.home-template.option-three .ascii-caption { display: none; }
.flyer-wall { display: grid; grid-template-columns: minmax(140px, 190px) minmax(0, 1fr) minmax(155px, 220px); align-items: start; gap: 20px; }
.wall-center { min-width: 0; }
.wall-rail { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 3; }
.wall-rail--left { margin-top: -214px; }
.wall-rail--right { margin-top: -204px; }
.wall-paper { position: relative; margin: 0; padding: 23px 18px 20px; color: #15120d; background-color: var(--paper); background-image: repeating-linear-gradient(113deg, transparent 0 3px, #0000000c 3px 4px), radial-gradient(ellipse at 20% 0%, #766b4540, transparent 60%); box-shadow: 4px 4px #000, -2px 0 #eee9d0; clip-path: polygon(1% 2%, 12% 0, 28% 2%, 41% 0, 66% 2%, 82% 0, 99% 2%, 98% 23%, 100% 38%, 99% 60%, 100% 82%, 98% 99%, 79% 98%, 61% 100%, 45% 98%, 30% 100%, 15% 98%, 0 100%, 2% 73%, 0 52%, 2% 30%); overflow-wrap: anywhere; }
.wall-paper p { margin: 0; white-space: pre-line; }
.wall-paper a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wall-paper::before { content: ""; position: absolute; top: 1px; left: 26%; width: 44%; height: 18px; background: #c2bca2b0; transform: rotate(-4deg); border-inline: 1px dashed #999075; }
.city-note { transform: rotate(-5deg); font: bold 1.3rem/1.06 var(--terminal-font); padding-top: 32px; min-height: 260px; }
.city-note p { max-width: 13ch; }
.paper-signature { display: block; font-size: 1rem; margin-top: 1rem; text-align: right; }
.local-print { transform: rotate(4deg); padding: 12px; background-color: #c8c3b4; }
.local-print .skyline { height: 150px; display: flex; align-items: end; background: #252523; overflow: hidden; margin: 0; filter: grayscale(1) contrast(2); }
.local-print .skyline svg { width: 380px; max-width: none; height: 170px; flex-shrink: 0; transform: translateX(-70px); }
.local-print img { width: 100%; height: 180px; object-fit: cover; filter: grayscale(1) contrast(1.5); }
.local-print figcaption { font: 1.15rem/1.05 var(--terminal-font); margin-top: 12px; text-align: center; white-space: pre-line; }
.pink-note { background-color: var(--magenta); transform: rotate(-8deg); width: 90%; align-self: center; font: italic bold 1.55rem/.95 var(--terminal-font); padding: 26px 18px; }
.pink-note span { display: block; margin-top: 12px; font: 2.5rem/1 var(--font-mono); text-align: center; }
.paper-overline { font: .875rem/1.15 var(--terminal-font); margin: 0 0 14px !important; }
.local-host { transform: rotate(3deg); }
.local-host h2 { font: 1.7rem/.95 var(--terminal-font); margin: 0 0 18px; }
.local-host > p:not(.paper-overline) { font: .875rem/1.3 var(--font-mono); }
.local-stamp { display: block; margin-top: 20px; padding: 8px; border: 3px double currentColor; transform: rotate(-7deg); font: 1.4rem/.95 var(--terminal-font); text-align: center; }
.certified-note { transform: rotate(4deg); min-height: 205px; padding-top: 25px; }
.certified-note p { font: 3.05rem/.85 var(--terminal-font); letter-spacing: -.04em; }
.certified-note small { display: block; margin-top: 18px; font-size: .875rem; }
.certified-note > span { position: absolute; right: 2px; bottom: 0; color: #94701b; font-size: 3.2rem; }
.wall-bbs-sign { color: var(--magenta); text-decoration: none; text-align: center; border: 3px double var(--magenta); padding: 17px 8px; box-shadow: 3px 4px var(--magenta), -2px -2px #514046; transform: rotate(2deg); font: 1.7rem/1 var(--terminal-font); background: #000; }
.wall-bbs-sign small { display: block; color: var(--text); font: .75rem/1.2 var(--terminal-font); margin-top: 12px; }
.wall-bbs-sign:hover { color: #000; background: var(--magenta); }
.wall-bbs-sign:hover small { color: #000; }
.manifesto-note { transform: rotate(-4deg); padding-right: 32px; }
.manifesto-note p { font: 1.5rem/1.08 var(--terminal-font); max-width: 15ch; }
.manifesto-note > span { float: right; font: 3rem/1 var(--font-mono); transform: rotate(15deg); }
.wall-issue { transform: rotate(3deg); }
.wall-issue h2 { font: 1.9rem/.95 var(--terminal-font); margin: 0 0 15px; }
.wall-issue .receipt__barcode { width: 100%; height: 60px; margin: 15px 0; }
.wall-issue > a { font: .95rem/1.2 var(--terminal-font); }
.frequency-note { transform: rotate(7deg); width: 83%; }
.bbs-terminal { position: relative; background: #030708; border: 1px solid var(--cyan); padding: 7px; box-shadow: 0 0 0 3px #020606, 0 0 0 4px #747c72, -7px 7px 0 #121616; font: 1.125rem/1.1 var(--terminal-font); scroll-margin-top: 15px; }
.terminal-chrome, .terminal-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 7px 9px; color: var(--cyan); border-bottom: 1px solid var(--cyan); font-size: .95rem; }
.terminal-chrome a { white-space: nowrap; }
.board-notice { margin: 0; padding: 7px 9px; color: var(--acid); background: #161907; font: .75rem/1.4 var(--font-mono); }
.terminal-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); }
.message-areas { border-right: 1px solid var(--cyan); padding: 13px 9px; }
.terminal-label { margin: 0 0 12px; font-size: .875rem; color: var(--cyan); }
.message-areas button { display: block; width: 100%; text-align: left; color: var(--text); background: transparent; border: 0; font: 1.07rem/1.2 var(--terminal-font); padding: 7px 5px; cursor: pointer; }
.message-areas button::before { content: "> "; }
.message-areas button[aria-pressed="true"] { background: var(--acid); color: #000; }
.message-areas button:hover { outline: 1px solid var(--acid); outline-offset: -1px; }
.local-node { margin-top: 38px; color: var(--cyan); text-align: center; }
.local-node pre { font: .8rem/1.1 var(--font-mono); overflow: hidden; color: var(--text); margin-bottom: 22px; }
.local-node p { text-align: right; line-height: 1.1; padding-right: 14px; }
.local-node strong { display: block; margin-top: 30px; font-weight: normal; font-size: .95rem; }
.terminal-main { min-width: 0; padding: 14px 12px 10px; }
.board-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.board-heading h1 { color: var(--cyan); font: 2.25rem/.95 var(--terminal-font); letter-spacing: .03em; margin: 0 0 6px; }
.board-heading p { color: var(--text-dim); margin: 0; font-size: 1rem; }
.board-sample-tag { font: .75rem/1.3 var(--font-mono); color: var(--acid); border: 1px solid #5c6000; padding: 3px 5px; flex-shrink: 0; }
.topic-list { overflow-x: auto; border-block: 1px solid #98aaa7; min-height: 239px; }
.topic-list table { width: 100%; border-collapse: collapse; text-align: left; font: 1.05rem/1.05 var(--terminal-font); }
.topic-list th { font-weight: normal; color: var(--paper); border-bottom: 1px solid #98aaa7; padding: 4px 6px; }
.topic-list td { padding: 0 6px; height: 25px; }
.topic-list td:first-child { color: var(--text-dim); width: 38px; }
.topic-list th:nth-child(n+3), .topic-list td:nth-child(n+3) { text-align: right; white-space: nowrap; }
.topic-list button { padding: 5px 0; border: 0; width: 100%; text-align: left; background: transparent; color: inherit; cursor: pointer; font: inherit; min-width: 180px; }
.topic-list tr[data-selected="true"] { background: var(--acid); color: #000; }
.topic-list tr[data-selected="true"] td { color: #000; }
.topic-list tbody tr:hover { outline: 1px solid var(--acid); outline-offset: -1px; }
.board-status { color: var(--text-dim); font-size: .875rem; min-height: 1em; margin: 7px 0; }
.message-preview { display: grid; grid-template-columns: minmax(0, 1fr) 150px; border: 1px solid var(--cyan); min-height: 225px; }
.message-preview__copy { padding: 12px; }
.message-preview h2 { font: 1.25rem/1.1 var(--terminal-font); margin: 0 0 12px; color: var(--acid); }
.message-preview p { margin: 0 0 12px; }
.message-preview__copy > div { font: .875rem/1.5 var(--font-mono); }
.message-preview aside { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--cyan); color: var(--cyan); padding: 10px; text-align: center; }
.message-preview aside pre { font: .625rem/1.2 var(--font-mono); overflow: hidden; }
.message-preview aside p { font-size: 1rem; }
.reply-draft { padding-top: 12px; }
.reply-draft label { display: block; color: var(--cyan); margin-bottom: 6px; font-size: .95rem; }
.reply-draft textarea { display: block; width: 100%; resize: vertical; min-height: 84px; background: #010505; color: var(--text); border: 1px solid #71a3a6; padding: 10px; font: 1rem/1.3 var(--terminal-font); }
.reply-draft button { font: 1rem/1.2 var(--terminal-font); color: var(--cyan); background: transparent; border: 0; padding: 10px 12px 7px 0; cursor: pointer; }
.reply-draft button:hover { color: var(--acid); }
.reply-draft .draft-note { color: var(--text-dim); font-size: .875rem; margin: 0 0 8px; }
.reply-draft output { display: block; white-space: pre-wrap; overflow-wrap: anywhere; border-left: 2px solid var(--acid); padding: 10px; font: .875rem/1.4 var(--font-mono); }
.reply-draft output[hidden] { display: none; }
.terminal-footer { border-top: 1px solid var(--cyan); border-bottom: 0; flex-wrap: wrap; font-size: .875rem; }
.board-disconnected, .board-noscript { padding: 24px; }
.keyboard-hint { color: var(--text-dim); margin: 7px 9px; font: .875rem/1.25 var(--terminal-font); }
.message-preview:focus-visible { outline: 2px dashed var(--magenta); outline-offset: 3px; }
.wall-scribble { color: var(--magenta); font: italic 1.9rem/1.05 var(--terminal-font); max-width: 650px; text-align: center; transform: rotate(-3deg); margin: 30px auto 40px; white-space: pre-line; }
.wall-editorial { padding: 20px 15px; border-top: 1px dashed #485354; }
.wall-editorial h2 { color: var(--cyan); font: 1.5rem/1.1 var(--terminal-font); }
.wall-editorial .hauer-item { max-width: 100%; margin-block: 25px; }
.option-three button:focus-visible, .option-three a:focus-visible, .option-three textarea:focus-visible, .topic-list:focus-visible { outline: 2px dashed var(--magenta); outline-offset: 3px; }
@media (min-width: 1700px) { .wall-brand a { font-size: 11.3rem; } }
@media (max-width: 1200px) {
  .home-template.option-three .app-col { padding-inline: 14px; }
  .flyer-wall { grid-template-columns: 140px minmax(0, 1fr) 160px; gap: 14px; }
  .terminal-layout { grid-template-columns: 150px minmax(0, 1fr); }
  .wall-paper { padding-inline: 12px; }
  .city-note { font-size: 1.2rem; }
  .certified-note p { font-size: 2.5rem; }
  .message-preview { grid-template-columns: 1fr; }
  .message-preview aside { display: none; }
  .board-sample-tag { display: none; }
  .wall-masthead { grid-template-columns: 24% 1fr 110px; min-height: 225px; }
  .wall-rail--left { margin-top: -195px; }
  .wall-rail--right { margin-top: -185px; }
  .home-template.option-three .ascii-backdrop { left: 95px; width: 330px; font-size: 4.5px; }
  .mascot-note { font-size: 1.1rem; }
}
@media (max-width: 960px) {
  .flyer-wall { grid-template-columns: minmax(0, 1fr) 170px; }
  .wall-rail--left { grid-column: 1 / -1; grid-row: 2; margin: 35px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .wall-center { grid-column: 1; grid-row: 1; }
  .wall-rail--right { grid-column: 2; grid-row: 1; margin-top: 0; }
  .wall-masthead { grid-template-columns: 24% 1fr 120px; }
  .home-template.option-three .ascii-backdrop { left: 0; top: 65px; }
  .signal-strip span:last-child { display: none; }
  .city-note { min-height: 0; }
  .terminal-layout { grid-template-columns: 132px minmax(0, 1fr); }
  .message-areas { padding-inline: 5px; }
  .message-areas button { font-size: 1rem; }
  .local-node pre { font-size: .6rem; }
}
@media (max-width: 700px) {
  .home-template.option-three .app-col { padding-inline: 12px; }
  .wall-masthead { min-height: 205px; grid-template-columns: 22% 1fr; gap: 10px; }
  .wall-brand a { font-size: clamp(4rem, 17vw, 7rem); }
  .wall-brand p { font-size: 1.5rem; }
  .mascot-note { font-size: .875rem; padding: 4px; margin-top: 18px; }
  .wall-masthead nav { grid-column: 1 / -1; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 12px; padding-bottom: 10px; }
  .home-template.option-three .ascii-backdrop { width: 165px; font-size: 2.4px; top: 65px; left: -18px; }
  .flyer-wall { display: flex; flex-direction: column; gap: 28px; }
  .wall-center { width: 100%; order: 0; }
  .wall-rail--right, .wall-rail--left { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; align-items: start; margin: 0; }
  .wall-rail--right { order: 1; }
  .wall-rail--left { order: 2; }
  .terminal-chrome { font-size: .875rem; }
  .terminal-layout { display: block; }
  .message-areas { display: flex; flex-wrap: wrap; gap: 3px; border-right: 0; border-bottom: 1px solid var(--cyan); padding: 8px 2px; }
  .message-areas .terminal-label, .local-node { display: none; }
  .message-areas button { width: auto; padding: 8px 6px; font-size: .95rem; }
  .terminal-main { padding: 12px 4px 5px; }
  .board-heading h1 { font-size: 1.8rem; }
  .topic-list th:last-child, .topic-list td:last-child { display: none; }
  .topic-list table { font-size: 1rem; }
  .topic-list button { min-width: 0; }
  .topic-list td { height: 36px; }
  .topic-list th, .topic-list td { padding-inline: 3px; }
  .message-preview__copy { padding: 10px; }
  .wall-scribble { font-size: 1.6rem; }
  .wall-editorial { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .home-template.option-three .ascii-backdrop { opacity: .9; } }