/* Tranhday base — design tokens, resets, shared components.
   Palette from Claude Design "Tranhday Site" (dark premium, gold accent). */

:root {
	color-scheme: dark;        /* native form controls, dropdown popups, scrollbars render dark */
	--site-max: 1400px;        /* content cap on wide screens (backgrounds stay full-bleed) */
	--acc: #d9a441;            /* overridden by Customizer via inline style */
	--bg: #17150f;
	--panel: #1e1b13;
	--line: #2c2a1f;
	--line-2: #3a3527;
	--line-3: #4a4636;
	--ink: #efe7d5;
	--soft: #c9c1ab;
	--muted: #a89f88;
	--dim: #7a725a;
	--dim-2: #6f6a55;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Space Grotesk', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; }

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: color .15s, border-color .15s, transform .15s, opacity .15s, background .15s;
}

/* Patterned placeholder blocks (stand-ins until real photos are uploaded) */
.ph {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font: 500 12px/1.5 ui-monospace, Menlo, monospace;
	letter-spacing: .06em;
	color: var(--dim);
	padding: 18px;
	background: repeating-linear-gradient(135deg, #252319 0 11px, #2c2a20 11px 22px);
}
.ph--gold {
	color: #9a8a5c;
	background: repeating-linear-gradient(135deg, #332d1c 0 11px, #3b3422 11px 22px);
}
.ph--grid {
	color: #8a7c54;
	background:
		repeating-linear-gradient(0deg, #332d1c 0 1px, transparent 1px 34px),
		repeating-linear-gradient(90deg, #332d1c 0 1px, transparent 1px 34px),
		#221f16;
}

.kicker {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--acc);
	margin-bottom: 16px;
}
.kicker--wide { letter-spacing: .28em; }
.kicker--center { text-align: center; }

.btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 15px;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.btn--acc { background: var(--acc); color: #17150f; font-weight: 700; }
.btn--acc:hover { transform: translateY(-2px); }
.btn--line { border: 1px solid var(--line-3); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--acc); }
.btn--lg { padding: 16px 34px; font-size: 16px; }

.chip {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	color: var(--muted);
	background: transparent;
	cursor: pointer;
	font-family: inherit;
}
.chip.is-active { background: var(--acc); color: #17150f; font-weight: 600; border-color: var(--acc); }
.chip--ghost { border-radius: 8px; cursor: default; }
.chip--acc { background: var(--acc); color: #17150f; font-weight: 600; border-color: var(--acc); padding: 6px 14px; font-size: 13px; }
.chip--acc-line { border-color: var(--acc); color: var(--acc); padding: 5px 14px; font-size: 13px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }

.link-acc { font-weight: 600; font-size: 15px; color: var(--acc); }

.section-title { font-weight: 700; font-size: 34px; margin: 0 0 10px; text-align: center; }
.section-title--left { text-align: left; margin: 0 0 6px; }
.section-sub { color: var(--muted); font-size: 15px; margin: 0; }

.page-title { font-weight: 700; font-size: 44px; margin: 0 0 10px; }
.page-title--center { text-align: center; font-size: 40px; text-wrap: balance; }
.page-intro { font-size: 16px; color: var(--muted); margin: 0 0 32px; max-width: 560px; }
.page-intro--center { text-align: center; margin: 0 auto 44px; max-width: 520px; }
.breadcrumb { font-size: 13px; color: var(--dim); margin-bottom: 14px; }

/* Dropzone (home CTA + custom tool) */
.dropzone {
	display: block;
	border: 2px dashed var(--line-3);
	border-radius: 18px;
	padding: 40px;
	background: var(--bg);
	text-align: center;
	cursor: pointer;
}
.dropzone.is-dragover { border-color: var(--acc); }
.dropzone-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: var(--line);
	font-size: 26px;
	margin: 0 auto 16px;
	color: var(--acc);
}
.dropzone-title { display: block; font-weight: 600; font-size: 20px; margin-bottom: 6px; }
.dropzone-hint { display: block; font-size: 14px; color: var(--dim); margin-bottom: 22px; }

@media (max-width: 720px) {
	.page-title { font-size: 34px; }
	.section-title { font-size: 28px; }
}

/* Wide screens: cap full-width sections at --site-max, keep backgrounds full-bleed.
   Pages with their own max-width containers (gallery, contact, ...) are untouched. */
@media (min-width: 1520px) {
	body .site-header,
	body .newsletter,
	body .site-footer,
	body .trust-bar,
	body .how-it-works,
	body .upload-cta-wrap,
	body .collection,
	body .comm-band-wrap,
	body .process-band {
		padding-inline: calc((100% - var(--site-max)) / 2);
	}
}