/* =============================================================================
 * error.css — branded 404 / 500 / 4xx error page.
 * Uses the same design tokens as main.css; this file is safe to load
 * standalone (fatal-error path pulls main.css + this).
 * ========================================================================== */

.dss-error-body{background:var(--off-white, #FDF9F6);font-family:var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);color:var(--ink, #141414);min-height:100vh;margin:0;}

.dss-error-page{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:80px 24px;overflow:hidden;}

.dss-error-hero{
	position:relative;
	width:100%;
	max-width:760px;
	text-align:center;
	padding:24px;
	z-index:1;
}

/* subtle starfield behind the art */
.dss-error-stars{
	position:absolute;inset:-40px;z-index:0;pointer-events:none;
	background-image:
		radial-gradient(1.5px 1.5px at 14% 22%, rgba(242,92,5,0.55) 50%, transparent 51%),
		radial-gradient(1px 1px   at 72% 18%, rgba(242,92,5,0.35) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 88% 66%, rgba(242,92,5,0.45) 50%, transparent 51%),
		radial-gradient(1px 1px   at 18% 78%, rgba(242,92,5,0.30) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 48% 8%, rgba(242,92,5,0.50) 50%, transparent 51%),
		radial-gradient(1px 1px   at 52% 90%, rgba(242,92,5,0.30) 50%, transparent 51%);
	animation:dss-err-twinkle 4.6s ease-in-out infinite;
}
@keyframes dss-err-twinkle{0%,100%{opacity:.6;}50%{opacity:1;}}

.dss-error-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;}

.dss-error-badge{width:170px;height:170px;filter:drop-shadow(0 12px 32px rgba(242,92,5,.25));animation:dss-err-float 5s ease-in-out infinite;}
.dss-error-badge svg{width:100%;height:100%;display:block;}
.dss-error-ring{animation:dss-err-spin 18s linear infinite;transform-origin:100px 100px;}
@keyframes dss-err-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes dss-err-spin{to{transform:rotate(360deg);}}

.dss-error-code{
	font-family:var(--font-display, 'Playfair Display', serif);
	font-size:clamp(3.2rem, 10vw, 6rem);
	font-weight:900;
	letter-spacing:-.04em;
	line-height:1;
	margin:-12px 0 6px;
	background:linear-gradient(135deg,#FFB347 0%,#F25C05 50%,#C94A00 100%);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	-webkit-text-fill-color:transparent;
	animation:dss-err-pop .7s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dss-err-pop{from{opacity:0;transform:scale(.8);}to{opacity:1;transform:scale(1);}}

.dss-error-heading{
	font-family:var(--font-display, 'Playfair Display', serif);
	font-size:clamp(1.6rem, 4vw, 2.4rem);
	font-weight:900;
	letter-spacing:-.02em;
	color:var(--ink, #141414);
	margin:0;
	max-width:560px;
}

.dss-error-message{
	color:var(--ink-3, #555);
	font-size:clamp(.96rem, 1.6vw, 1.08rem);
	line-height:1.7;
	max-width:520px;
	margin:0;
}

.dss-error-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:14px;}

.dss-error-search{
	display:flex;gap:8px;
	background:#fff;
	border:1.5px solid var(--border, #E6E0D8);
	border-radius:100px;
	padding:6px;
	max-width:440px;width:100%;
	margin-top:10px;
	box-shadow:0 8px 28px rgba(242,92,5,.08);
	transition:border-color .2s ease, box-shadow .2s ease;
}
.dss-error-search:focus-within{border-color:var(--orange, #F25C05);box-shadow:0 12px 36px rgba(242,92,5,.18);}
.dss-error-search input{
	flex:1;border:none;outline:none;background:transparent;
	padding:10px 16px;font-size:.95rem;font-family:inherit;color:var(--ink, #141414);
}
.dss-error-search button{
	background:var(--orange, #F25C05);color:#fff;border:none;
	padding:10px 20px;border-radius:100px;
	font-weight:800;font-size:.88rem;cursor:pointer;
	transition:background .18s ease, transform .18s ease;
}
.dss-error-search button:hover{background:var(--orange-deep, #C94A00);transform:translateY(-1px);}

.dss-error-links{margin-top:18px;}
.dss-error-links__label{
	display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
	color:var(--muted, #888);margin-bottom:12px;
}
.dss-error-links ul{
	list-style:none;padding:0;margin:0;
	display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.dss-error-links li a{
	display:inline-block;
	padding:8px 16px;
	border-radius:100px;
	background:#fff;
	border:1px solid var(--border, #E6E0D8);
	color:var(--ink-2, #2E2E2E);
	font-weight:600;font-size:.85rem;
	transition:all .18s ease;
}
.dss-error-links li a:hover{
	background:var(--orange-lite, #FFF0E6);
	border-color:var(--orange-mid, #FFD6B8);
	color:var(--orange, #F25C05);
	transform:translateY(-2px);
}

.dss-error-diag{
	margin-top:24px;padding:14px 18px;
	background:rgba(20,20,20,.04);border:1px solid var(--border, #E6E0D8);border-radius:12px;
	font-size:.8rem;color:var(--ink-3, #555);
	max-width:480px;margin-left:auto;margin-right:auto;text-align:left;
}
.dss-error-diag summary{cursor:pointer;font-weight:700;color:var(--ink-2, #2E2E2E);letter-spacing:.02em;}
.dss-error-diag summary:focus-visible{outline:2px solid var(--orange, #F25C05);outline-offset:3px;border-radius:4px;}
.dss-error-diag dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:12px 0 10px;}
.dss-error-diag dt{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted, #888);font-weight:800;padding-top:2px;}
.dss-error-diag dd{margin:0;color:var(--ink-2, #2E2E2E);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;}
.dss-error-diag code{background:#fff;padding:2px 8px;border:1px solid var(--border, #E6E0D8);border-radius:4px;}
.dss-error-diag__hint{font-size:.78rem;color:var(--ink-3, #555);margin:6px 0 0;}

@media(prefers-reduced-motion: reduce){
	.dss-error-stars,.dss-error-badge,.dss-error-ring,.dss-error-code{animation:none !important;}
}