/* Each theme owns its palette, typography and error-page composition. */
.error-page { --paper: #fff; --surface: #f5f6f8; --ink: #212631; --muted: #5b6270; --accent: #365fdb; --line: #dce0e7; --heading: 'Montserrat', Arial, sans-serif; --body: 'Montserrat', Arial, sans-serif; --radius: 0; margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.65 var(--body); }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .error-brand { font-family: var(--heading); }
a, h1, h2, h3, p { overflow-wrap: anywhere; }
.error-shell { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.error-header { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.error-brand { font-size: 26px; font-weight: 700; line-height: 1.2; }
.error-header nav { display: flex; gap: 24px; font-size: 12px; flex-shrink: 0; }
.error-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 70px; padding-block: 70px; }
.error-art { position: relative; display: grid; align-content: center; text-align: center; min-height: 390px; background: var(--surface); border-radius: var(--radius); }
.error-code { position: relative; font: 800 clamp(100px, 14vw, 200px)/1 var(--heading); letter-spacing: -.08em; color: var(--accent); }
.error-lines { display: none; }
.error-mark { display: none; }
.error-kicker { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 17px; }
h1 { font-size: clamp(34px, 4vw, 53px); line-height: 1.1; letter-spacing: -.035em; }
.error-description { color: var(--muted); max-width: 510px; margin-top: 22px; }
.error-home { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; padding: 13px 23px; margin-top: 27px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: white; font-size: 12px; font-weight: 700; }
.error-search { margin-top: 35px; max-width: 490px; text-align: left; }
.error-search label { display: block; font-size: 11px; margin-bottom: 8px; }
.error-search > div { display: flex; min-width: 0; }
.error-search input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: var(--radius) 0 0 var(--radius); padding: 13px; background: var(--paper); color: var(--ink); font: 12px var(--body); }
.error-search button { border: 1px solid var(--ink); padding: 12px 19px; border-radius: 0 var(--radius) var(--radius) 0; background: var(--ink); color: var(--paper); font: 700 12px var(--body); cursor: pointer; }
.error-recent { border-top: 1px solid var(--line); padding-top: 25px; padding-bottom: 45px; }
.error-recent h2 { font-size: 23px; line-height: 1.3; }
.error-recent ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 25px 0 0; gap: 25px; }
.error-recent li { display: flex; align-items: flex-start; gap: 13px; }
.error-post-number { font-size: 12px; color: var(--accent); padding-top: 3px; }
.error-recent h3 { font-size: 17px; line-height: 1.4; }
.error-recent p { font-size: 10px; color: var(--muted); margin-top: 10px; }
.error-footer { border-top: 1px solid var(--line); padding-block: 23px; font-size: 11px; color: var(--muted); }
/* News 1: classic blue news desk. */
.error-news_1 .error-art { border-left: 7px solid var(--accent); }
.error-news_1 .error-code { text-shadow: 8px 8px 0 #dbe3fb; }
/* News 2: monochrome dispatch, with a monospaced status panel. */
.error-news_2 { --accent: #202020; --heading: 'Spline Sans Mono', monospace; }
.error-news_2 .error-hero { grid-template-columns: 1.25fr 1fr; }
.error-news_2 .error-art { grid-column: 2; grid-row: 1; min-height: 310px; border: 1px dashed var(--ink); }
.error-news_2 .error-copy { grid-column: 1; grid-row: 1; }
.error-news_2 .error-code { font-weight: 400; font-size: clamp(95px,12vw,160px); }
/* News 3: centered blue masthead and oversized outlined numerals. */
.error-news_3 { --accent: #2563eb; --radius: 6px; }
.error-news_3 .error-hero { display: block; text-align: center; max-width: 760px; margin: auto; padding-top: 35px; }
.error-news_3 .error-art { background: transparent; min-height: 200px; }
.error-news_3 .error-code { color: var(--paper); -webkit-text-stroke: 2px var(--accent); }
.error-news_3 .error-description, .error-news_3 .error-search { margin-inline: auto; }
/* News 4: soft slate, rounded card and editorial serif. */
.error-news_4 { --paper: #f8fafc; --surface: #e2e8f0; --ink: #0f172a; --accent: #334155; --line: #cbd5e1; --radius: 24px; --heading: 'Lora', Georgia, serif; --body: 'Outfit', sans-serif; }
.error-news_4 .error-art { border-radius: 50% 50% 24px 24px; box-shadow: inset 0 0 0 14px #edf1f6; }
.error-news_4 .error-code { font-weight: 500; letter-spacing: -.07em; }
/* News 5: print poster, hard rules and fluorescent accent. */
.error-news_5 { --paper: #f3efe4; --surface: #fffdf7; --ink: #151515; --accent: #b42c15; --line: #151515; --heading: 'Libre Caslon Text', Georgia, serif; --body: 'DM Sans', sans-serif; }
.error-news_5 .error-header { border-bottom: 4px solid var(--ink); }
.error-news_5 .error-art { border: 2px solid var(--ink); background: #d7ff45; box-shadow: 10px 10px 0 var(--ink); transform: rotate(-3deg); }
.error-news_5 .error-code { font-family: 'Archivo Black', sans-serif; color: var(--ink); }
.error-news_5 .error-recent { border-top-width: 4px; }
/* News 6: field report in forest green and yellow. */
.error-news_6 { --paper: #f4f7ef; --surface: #10241f; --ink: #10241f; --accent: #0f766e; --line: #b9c8c0; --radius: 8px; --heading: 'Merriweather', Georgia, serif; --body: 'Inter', sans-serif; }
.error-news_6 .error-art { border-bottom: 12px solid #f2c94c; }
.error-news_6 .error-code { color: #f2c94c; font-size: clamp(95px,12vw,160px); }
.error-news_6 .error-mark { display: block; color: #f2c94c; font-size: 52px; margin-top: 12px; }
/* News 7: loud cyan and pink tabloid. */
.error-news_7 { --paper: #f7f5ef; --surface: #00d1ff; --ink: #111; --accent: #a6144b; --line: #111; --radius: 8px; --heading: 'Barlow Condensed', sans-serif; --body: 'Inter', sans-serif; background-image: linear-gradient(90deg,#11111109 1px,transparent 1px); background-size: 48px 100%; }
.error-news_7 .error-art { border: 3px solid var(--ink); box-shadow: 9px 9px 0 #ff4d8d; transform: rotate(3deg); }
.error-news_7 .error-code { font-size: clamp(140px,21vw,270px); color: var(--ink); }
.error-news_7 h1 { text-transform: uppercase; font-size: clamp(45px,6vw,76px); }
/* News 8: newspaper correction sheet, double rules and red ink. */
.error-news_8 { --paper: #fff; --surface: #faf9f6; --ink: #202020; --muted: #66615b; --accent: #a32924; --line: #d6d2cc; --heading: 'Libre Caslon Display', Georgia, serif; --body: 'Libre Franklin', sans-serif; }
.error-news_8 .error-header { border-bottom: 3px double var(--ink); }
.error-news_8 .error-brand { font-weight: 400; font-size: 36px; }
.error-news_8 .error-art { background: transparent; border: 1px solid var(--line); padding: 25px; }
.error-news_8 .error-code { font-weight: 400; font-size: clamp(130px,20vw,250px); color: var(--ink); }
.error-news_8 .error-lines { display: flex; gap: 12px; border-top: 3px double var(--ink); padding-top: 20px; }
.error-news_8 .error-lines i { display: block; flex: 1; height: 70px; background: repeating-linear-gradient(var(--line) 0 1px,transparent 1px 9px); }
.error-news_8 h1 { font-weight: 400; font-size: clamp(42px,5vw,65px); }
.error-news_8 .error-recent h3 { font-size: 25px; font-weight: 400; }
/* Blog 1: a pink, rounded lifestyle cover. */
.error-blog_1 { --paper: #fff; --surface: #fff0f6; --ink: #212121; --accent: #b91b66; --line: #f0d8e5; --radius: 30px; --heading: Georgia, serif; --body: Arial, sans-serif; }
.error-blog_1 .error-art { border-radius: 48% 48% 18% 18%; transform: rotate(-5deg); }
.error-blog_1 .error-code { font-weight: 400; }
.error-blog_1 .error-mark { display: block; color: var(--accent); font-size: 70px; line-height: 1; }
/* Blog 2: black magazine cover with a quiet serif headline. */
.error-blog_2 { --paper: #f2f2f2; --surface: #191919; --ink: #191919; --accent: #191919; --line: #d1d1d1; --heading: Georgia, serif; --body: Arial, sans-serif; }
.error-blog_2 .error-header { border-bottom: 4px solid var(--ink); }
.error-blog_2 .error-art { min-height: 440px; }
.error-blog_2 .error-code { color: white; font-weight: 400; }
.error-blog_2 .error-recent ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
.error-blog_2 .error-recent li { border-top: 1px solid var(--line); padding-top: 15px; }
/* Blog 3: simple blue card on a cool gray canvas. */
.error-blog_3 { --paper: #f3f4f6; --surface: #eff6ff; --ink: #1f2937; --accent: #1d4ed8; --line: #d1d5db; --radius: 12px; --heading: Arial, sans-serif; --body: Arial, sans-serif; }
.error-blog_3 .error-hero { display: block; background: white; max-width: 740px; margin: 45px auto; padding: 40px; border-radius: 18px; text-align: center; box-shadow: 0 18px 50px #1725540b; }
.error-blog_3 .error-art { min-height: 165px; background: none; }
.error-blog_3 .error-code { font-size: 140px; }
.error-blog_3 .error-description, .error-blog_3 .error-search { margin-inline: auto; }
/* Blog 4: warm orange travel postcard. */
.error-blog_4 { --paper: #fffaf4; --surface: #ffedd5; --ink: #431407; --muted: #7c4d38; --accent: #9a3412; --line: #eacdb6; --radius: 20px; --heading: 'Fraunces', Georgia, serif; --body: 'Manrope', sans-serif; }
.error-blog_4 .error-art { grid-column: 2; grid-row: 1; border: 10px solid white; outline: 1px solid var(--line); transform: rotate(4deg); box-shadow: 0 15px 35px #7c2d1210; }
.error-blog_4 .error-copy { grid-column: 1; grid-row: 1; }
.error-blog_4 .error-code { font-weight: 600; }
/* Blog 5: blue graph-paper notebook with a mint tab. */
.error-blog_5 { --paper: #e8edec; --surface: #f8fbfa; --ink: #101f2b; --accent: #3157ff; --line: #aab7b9; --heading: 'Space Grotesk', sans-serif; --body: 'Space Grotesk', sans-serif; background-image: linear-gradient(#101f2b0d 1px,transparent 1px),linear-gradient(90deg,#101f2b0d 1px,transparent 1px); background-size: 28px 28px; }
.error-blog_5 .error-art { border: 1px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); border-top: 40px solid #a9f7d2; }
.error-blog_5 .error-code { color: var(--accent); font-weight: 500; }
.error-blog_5 .error-recent li { background: var(--surface); border: 1px solid var(--ink); padding: 18px; }
/* Blog 6: botanical journal with an arched sage leaf. */
.error-blog_6 { --paper: #eef3e6; --surface: #c9dc8c; --ink: #18241d; --muted: #5f6f64; --accent: #98432b; --line: #b9c4ba; --radius: 8px; --heading: 'Literata', Georgia, serif; --body: 'Manrope', sans-serif; }
.error-blog_6 .error-art { border-radius: 55% 0 55% 0; border: 1px solid var(--line); }
.error-blog_6 .error-code { font-size: clamp(100px,14vw,180px); font-weight: 500; color: var(--ink); }
.error-blog_6 .error-recent h3 { font-weight: 500; }
/* Blog 7: yellow archive card and a monospaced index. */
.error-blog_7 { --paper: #e9e5d8; --surface: #fffdf5; --ink: #111; --muted: #756f65; --accent: #006d70; --line: #c8c2b7; --radius: 6px; --heading: 'Source Serif 4', Georgia, serif; --body: 'IBM Plex Sans', sans-serif; }
.error-blog_7 .error-art { background: #f4c84a; border: 1px solid var(--ink); box-shadow: 7px 7px 0 var(--surface),8px 8px 0 var(--ink); grid-column: 2; grid-row: 1; }
.error-blog_7 .error-copy { grid-column: 1; grid-row: 1; }
.error-blog_7 .error-code { font-family: 'IBM Plex Mono', monospace; font-size: clamp(95px,13vw,170px); color: var(--ink); }
.error-blog_7 .error-kicker, .error-blog_7 .error-post-number { font-family: 'IBM Plex Mono', monospace; }
/* Blog 8: a centered missing journal leaf on warm paper. */
.error-blog_8 { --paper: #fcfbf8; --surface: #f1eee8; --ink: #202020; --muted: #66615b; --accent: #a32924; --line: #d6d2cc; --heading: 'Libre Caslon Display', Georgia, serif; --body: 'Libre Franklin', sans-serif; }
.error-blog_8 .error-header { display: block; text-align: center; border-bottom: 3px double var(--ink); }
.error-blog_8 .error-brand { font-size: 42px; font-weight: 400; }
.error-blog_8 .error-header nav { justify-content: center; margin-top: 18px; }
.error-blog_8 .error-hero { display: block; text-align: center; max-width: 720px; margin: auto; padding-top: 32px; }
.error-blog_8 .error-art { width: 210px; min-height: 175px; margin: 0 auto 30px; background: none; border-block: 1px solid var(--line); }
.error-blog_8 .error-code { font-size: 140px; font-weight: 400; font-style: italic; }
.error-blog_8 h1 { font-weight: 400; font-size: clamp(44px,5vw,65px); }
.error-blog_8 .error-description, .error-blog_8 .error-search { margin-inline: auto; }
.error-blog_8 .error-home { color: var(--ink); border-color: var(--ink); background: none; }
.error-blog_8 .error-recent h3 { font-size: 25px; font-weight: 400; }
@media (max-width: 850px) {
    .error-hero { gap: 35px; }
    .error-art { min-height: 320px; }
    .error-recent ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .error-shell { width: calc(100% - 36px); }
    .error-header { align-items: flex-start; gap: 15px; padding-block: 22px; }
    .error-header nav { gap: 15px; font-size: 11px; }
    .error-brand { font-size: 22px; }
    .error-page .error-hero { display: flex; flex-direction: column; gap: 30px; padding-block: 35px; }
    .error-page .error-art { width: 100%; min-height: 220px; }
    .error-page .error-code { font-size: 130px; }
    .error-page .error-copy { width: 100%; }
    .error-page .error-description, .error-page .error-search { max-width: none; }
    .error-page .error-recent ol { grid-template-columns: 1fr; gap: 20px; }
    .error-news_5 .error-art, .error-news_7 .error-art, .error-blog_4 .error-art { transform: none; }
    .error-blog_3 .error-hero { padding: 25px; }
    .error-blog_3 .error-art { min-height: 140px; }
    .error-blog_8 .error-art { width: 180px; min-height: 150px; margin-bottom: 0; }
    .error-news_8 .error-lines i { height: 36px; }
    .error-news_8 .error-brand, .error-blog_8 .error-brand { font-size: 30px; }
}