/* TDA site chrome + subpage design system — "step into the studio".
   Subpages carry the homepage's dark, warm-lit studio mood: near-black surfaces,
   cream text, olive-gold + teal accents, a warm lamp glow. Three type roles echo
   the three pillars: Fraunces serif = storytelling, Hanken sans = clarity,
   Space Mono = the technical/dev voice. */

:root{
	--tda-h:64px;
	/* palette */
	--tda-bg:#0b0a0d; --tda-surface:#141319; --tda-surface2:#1c1b23;
	--tda-ink:#f4efe9; --tda-body:#c8c1b7; --tda-muted:#8d867c;
	--tda-gold:#b5a838; --tda-glow:#e3d77e; --tda-teal:#39d5c9;
	--tda-edge:rgba(244,239,233,.10); --tda-edge2:rgba(181,168,56,.32);
	/* type */
	--tda-display:'Fraunces',Georgia,'Times New Roman',serif;
	--tda-sans:'Hanken Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
	--tda-mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

/* ==========================================================================
   Site header (frosted brand bar) — dark on every non-studio page
   ========================================================================== */
.tda-siteheader{
	position:fixed; top:0; left:0; right:0; z-index:9990;
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	height:var(--tda-h); padding:0 clamp(16px,4vw,34px);
	background:rgba(9,7,13,.86);
	-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
	border-bottom:1px solid rgba(255,255,255,.07);
	font-family:var(--tda-sans);
}
.admin-bar .tda-siteheader{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .tda-siteheader{ top:46px; } }

.tda-siteheader .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--tda-ink); }
.tda-siteheader .logo{ height:32px; width:auto; display:block; flex:none; }
.tda-siteheader .brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.tda-siteheader .bt-name{ font-size:16px; letter-spacing:.15em; font-weight:700; }
.tda-siteheader .tag{ font-family:var(--tda-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tda-gold); margin-top:4px; }

.tda-siteheader .nav{ display:flex; align-items:center; gap:6px; }
.tda-siteheader .nav a{
	font-family:var(--tda-mono); font-size:14px; letter-spacing:.05em; color:var(--tda-ink); text-decoration:none;
	padding:9px 15px; border-radius:10px; background:rgba(255,255,255,.05); transition:.16s;
}
.tda-siteheader .nav a:hover,
.tda-siteheader .nav a:focus-visible{ background:rgba(181,168,56,.16); color:var(--tda-glow); outline:none; }
.tda-siteheader .tda-burger{ display:none; }

/* hide The7's native header + spacers, dark-ify the canvas */
.tda-has-siteheader .masthead,
.tda-has-siteheader .dt-mobile-header,
.tda-has-siteheader .header-space,
.tda-has-siteheader .mobile-header-space{ display:none !important; }
.tda-has-siteheader #page{ padding-top:var(--tda-h); background:var(--tda-bg); }
.tda-has-siteheader #main,
.tda-has-siteheader #content,
.tda-has-siteheader .wf-container-main,
.tda-has-siteheader .wf-wrap{ background:transparent; }
/* The7 lays #main out as a content+sidebar grid; our templates are full-bleed,
   so collapse it to a single full-width column. */
.tda-has-siteheader .wf-container-main{ display:block !important; }
.tda-has-siteheader #content{ width:100% !important; max-width:none !important; float:none !important; }
.tda-has-siteheader .sidebar,
.tda-has-siteheader .content-sidebar-wrap .sidebar{ display:none !important; }
.tda-has-siteheader #footer,
.tda-has-siteheader #bottom-bar{ display:none !important; }

/* The7 page-title band -> dark "studio hero" lit by a warm lamp glow */
.tda-has-siteheader .page-title{
	position:relative; overflow:hidden; text-align:center;
	background:var(--tda-bg) !important; border-bottom:1px solid var(--tda-edge);
	padding:66px 22px 46px !important;
}
.tda-has-siteheader .page-title::before{
	content:""; position:absolute; left:50%; top:-55%; transform:translateX(-50%);
	width:min(760px,120%); height:460px; pointer-events:none;
	background:radial-gradient(ellipse at center, rgba(227,215,126,.17), rgba(181,168,56,.05) 45%, transparent 70%);
}
.tda-has-siteheader .page-title .wf-wrap{ position:relative; }
.tda-has-siteheader .page-title-head h1{
	font-family:var(--tda-display); font-weight:400; color:var(--tda-ink);
	font-size:clamp(34px,5vw,54px); line-height:1.05; letter-spacing:-.01em; margin:0;
}
.tda-has-siteheader .page-title-breadcrumbs{ margin-top:16px; }
.tda-has-siteheader .breadcrumbs{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px; }
.tda-has-siteheader .breadcrumbs,
.tda-has-siteheader .breadcrumbs a,
.tda-has-siteheader .breadcrumbs span{
	font-family:var(--tda-mono); font-size:11px !important; letter-spacing:.12em; text-transform:uppercase;
	color:var(--tda-muted) !important;
}
.tda-has-siteheader .breadcrumbs a:hover{ color:var(--tda-gold) !important; }
.tda-has-siteheader .page-title .assistive-text{ display:none; }

/* --- header mobile --- */
@media (max-width:520px){ .tda-siteheader .brand-text{ display:none; } }
@media (max-width:720px){
	.tda-siteheader .tda-burger{
		display:flex; flex-direction:column; justify-content:center; gap:4px;
		width:40px; height:40px; padding:0; border:0; cursor:pointer;
		background:rgba(255,255,255,.06); border-radius:9px;
	}
	.tda-siteheader .tda-burger span{ display:block; width:18px; height:2px; margin:0 auto; background:var(--tda-ink); transition:.2s; }
	.tda-siteheader .nav{
		position:absolute; top:100%; right:8px; left:8px; margin-top:6px;
		flex-direction:column; align-items:stretch; gap:4px; padding:10px;
		background:rgba(12,10,16,.97); border:1px solid rgba(255,255,255,.08); border-radius:12px;
		display:none;
	}
	.tda-siteheader .nav.open{ display:flex; }
	.tda-siteheader .nav a{ padding:12px 14px; font-size:14px; }
}

/* ==========================================================================
   Site footer
   ========================================================================== */
.tda-sitefooter{
	background:#0b090f; color:var(--tda-body);
	border-top:1px solid rgba(255,255,255,.07);
	font-family:var(--tda-sans);
	padding:56px clamp(16px,5vw,64px) 0;
}
.tda-sitefooter .tf-inner{
	max-width:1180px; margin:0 auto;
	display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; align-items:start;
}
.tda-sitefooter .tf-logo-link{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--tda-ink); }
.tda-sitefooter .tf-logo{ height:34px; width:auto; display:block; flex:none; }
.tda-sitefooter .tf-name{ font-size:15px; letter-spacing:.15em; font-weight:700; }
.tda-sitefooter .tf-tag{ margin:16px 0 18px; max-width:44ch; font-size:13.5px; line-height:1.6; color:var(--tda-muted); }
.tda-sitefooter .tf-social{ display:flex; flex-wrap:wrap; gap:18px; }
.tda-sitefooter .tf-social a{ font-family:var(--tda-mono); color:var(--tda-body); text-decoration:none; font-size:12.5px; letter-spacing:.04em; transition:.16s; }
.tda-sitefooter .tf-social a:hover{ color:var(--tda-glow); }
.tda-sitefooter .tf-col{ display:flex; flex-direction:column; gap:10px; }
.tda-sitefooter .tf-col h3{ font-family:var(--tda-mono); margin:0 0 6px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--tda-gold); font-weight:700; }
.tda-sitefooter .tf-col a{ color:var(--tda-body); text-decoration:none; font-size:13.5px; transition:.16s; }
.tda-sitefooter .tf-col a:hover{ color:var(--tda-glow); }
.tda-sitefooter .tf-base{
	max-width:1180px; margin:44px auto 0; padding:20px 0;
	border-top:1px solid rgba(255,255,255,.06);
	font-family:var(--tda-mono); font-size:11px; letter-spacing:.06em; color:var(--tda-muted);
}
@media (max-width:760px){
	.tda-sitefooter{ padding-top:40px; }
	.tda-sitefooter .tf-inner{ grid-template-columns:1fr; gap:30px; }
}

/* ==========================================================================
   Shared page rhythm
   ========================================================================== */
.tda-contact,.tda-project,.tda-blog,.tda-post,.tda-portfolio,.tda-embed{ font-family:var(--tda-sans); }

/* --- Contact --- */
.tda-contact{
	max-width:1060px; margin:0 auto; padding:56px 22px 84px;
	display:grid; grid-template-columns:1fr 1.12fr; gap:52px; align-items:start; color:var(--tda-body);
}
.tda-contact .tc-eyebrow{ font-family:var(--tda-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--tda-gold); margin:0 0 12px; }
.tda-contact .tc-title{ font-family:var(--tda-display); font-weight:400; font-size:clamp(28px,3.6vw,40px); line-height:1.08; margin:0 0 16px; color:var(--tda-ink); }
.tda-contact .tc-intro p{ font-size:16px; line-height:1.7; color:var(--tda-body); }
.tda-contact .tc-elsewhere{ margin-top:30px; }
.tda-contact .tc-elsewhere h3{ font-family:var(--tda-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--tda-muted); margin:0 0 12px; }
.tda-contact .tc-elsewhere ul{ list-style:none; margin:0; padding:0; }
.tda-contact .tc-elsewhere li{ margin:0 0 9px; }
.tda-contact .tc-elsewhere a{ color:var(--tda-body); text-decoration:none; font-size:14px; border-bottom:1px solid var(--tda-edge); padding-bottom:2px; }
.tda-contact .tc-elsewhere a:hover{ color:var(--tda-glow); border-color:var(--tda-gold); }

.tda-contact .tc-formwrap{ background:linear-gradient(180deg,var(--tda-surface),#0e0d12); border:1px solid var(--tda-edge); border-radius:16px; padding:28px; }
.tda-contact .tc-form{ display:flex; flex-direction:column; gap:18px; }
.tda-contact .tc-field{ display:flex; flex-direction:column; gap:7px; margin:0; }
.tda-contact .tc-field label,
.tda-contact .tc-services legend{ font-size:13px; font-weight:600; color:var(--tda-ink); letter-spacing:.02em; }
.tda-contact .tc-field label span{ color:var(--tda-gold); }
.tda-contact input[type=text],
.tda-contact input[type=email],
.tda-contact textarea{
	font-family:var(--tda-sans); font-size:15px; color:var(--tda-ink); width:100%;
	padding:12px 14px; border:1px solid var(--tda-edge); border-radius:10px; background:rgba(0,0,0,.35); transition:.15s;
}
.tda-contact input::placeholder,.tda-contact textarea::placeholder{ color:#6a645b; }
.tda-contact input:focus,.tda-contact textarea:focus{ outline:none; border-color:var(--tda-gold); box-shadow:0 0 0 3px rgba(181,168,56,.16); background:rgba(0,0,0,.5); }
.tda-contact textarea{ resize:vertical; min-height:130px; }
.tda-contact .tc-services{ border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.tda-contact .tc-services label{ display:inline-flex; align-items:center; gap:9px; font-weight:400; font-size:14px; color:var(--tda-body); }
.tda-contact .tc-services input{ accent-color:var(--tda-gold); }
.tda-contact .tc-submit{
	align-self:flex-start; font-family:var(--tda-sans); font-weight:700; font-size:15px; cursor:pointer;
	color:#20200a; background:linear-gradient(90deg,var(--tda-glow),var(--tda-gold));
	border:0; border-radius:10px; padding:13px 26px; transition:filter .15s;
}
.tda-contact .tc-submit:hover{ filter:brightness(1.08); }
.tda-contact .tc-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tda-contact .tc-note{ padding:13px 16px; border-radius:10px; font-size:14px; margin:0 0 16px; }
.tda-contact .tc-sent{ background:rgba(57,213,201,.12); border:1px solid rgba(57,213,201,.5); color:#7fe9df; }
.tda-contact .tc-error{ background:rgba(214,72,72,.12); border:1px solid rgba(214,72,72,.5); color:#f0a3a3; }

/* --- shared single (project/post) title hero --- */
.tda-project .tp-head,
.tda-post .tp-head{ text-align:center; padding:8px 0 28px; }
.tda-project .tp-eyebrow,
.tda-post .tp-eyebrow{ font-family:var(--tda-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--tda-gold); margin:0 0 12px; }
.tda-project .tp-h1,
.tda-post .tp-h1{ font-family:var(--tda-display); font-weight:400; font-size:clamp(32px,4.6vw,48px); line-height:1.05; letter-spacing:-.01em; color:var(--tda-ink); margin:0; }
.tda-post .tp-head .tpost-meta{ margin:16px 0 0; }

/* --- Single project --- */
.tda-project{ max-width:840px; margin:0 auto; padding:52px 22px 84px; color:var(--tda-body); }
.tda-project .tp-hero{ margin:0 0 30px; }
.tda-project .tp-hero img{ width:100%; aspect-ratio:16/9; max-height:440px; object-fit:cover; border-radius:16px; display:block; border:1px solid var(--tda-edge); }
.tda-project .tp-cats{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.tda-project .tp-chip{ font-family:var(--tda-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--tda-gold); border:1px solid var(--tda-edge2); border-radius:999px; padding:6px 13px; }
.tda-project .tp-body{ font-size:16.5px; line-height:1.75; color:var(--tda-body); }
.tda-project .tp-body h2{ font-family:var(--tda-display); font-weight:400; font-size:clamp(24px,3vw,32px); line-height:1.2; color:var(--tda-ink); margin:.5em 0 .5em; }
.tda-project .tp-body h4{ font-family:var(--tda-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--tda-gold); margin:2em 0 .6em; }
.tda-project .tp-body p{ margin:0 0 1.1em; }
.tda-project .tp-body p:empty,
.tda-project .tp-body h4:empty,
.tda-project .tp-body div:empty{ display:none; }
.tda-project .tp-body img{ max-width:100%; height:auto; border-radius:10px; }
.tda-project .tp-body a{ color:var(--tda-teal); }
.tda-project .tp-links{ list-style:none; margin:.2em 0 0; padding:0; }
.tda-project .tp-links li{ margin:0 0 6px; }
.tda-project .tp-links a{ color:var(--tda-teal); }
.tda-project .tp-list{ list-style:none; margin:.5em 0 1.6em; padding:0; }
.tda-project .tp-list li{ position:relative; padding:0 0 0 22px; margin:0 0 11px; font-size:16px; color:var(--tda-body); }
.tda-project .tp-list li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:2px; background:var(--tda-gold); }
.tda-project .tp-list li a{ color:var(--tda-teal); }
.tda-project .tp-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:.5em 0 1.6em; padding:0; }
.tda-project .tp-tags li{ font-family:var(--tda-mono); font-size:12px; color:var(--tda-body); background:rgba(255,255,255,.04); border:1px solid var(--tda-edge); border-radius:999px; padding:7px 14px; }
.tda-project .tp-video{ width:100%; height:auto; border-radius:14px; display:block; margin:.5em 0 1.6em; background:#000; border:1px solid var(--tda-edge); }
.tda-project .tp-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:.5em 0 1.6em; }
.tda-project .tp-gallery br{ display:none; }
.tda-project .tp-gallery a{ position:relative; display:block; border-radius:12px; overflow:hidden; border:1px solid var(--tda-edge); }
.tda-project .tp-gallery img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; }
.tda-project .tp-gallery .tp-play{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	background:rgba(10,8,14,.4); color:#fff; font-family:var(--tda-mono); font-size:12px; letter-spacing:.05em;
	opacity:0; transition:opacity .18s;
}
.tda-project .tp-gallery a:hover .tp-play{ opacity:1; }
@media (max-width:560px){ .tda-project .tp-gallery{ grid-template-columns:1fr; } }

/* shared project/post footer */
.tda-project .tp-foot,
.tda-post .tp-foot{
	display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
	margin-top:48px; padding-top:26px; border-top:1px solid var(--tda-edge);
}
.tda-project .tp-back,
.tda-post .tp-back{ font-family:var(--tda-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tda-muted); text-decoration:none; }
.tda-project .tp-back:hover,
.tda-post .tp-back:hover{ color:var(--tda-gold); }
.tda-project .tp-cta,
.tda-post .tp-cta{
	background:linear-gradient(90deg,var(--tda-glow),var(--tda-gold)); color:#20200a; font-weight:700;
	text-decoration:none; padding:12px 22px; border-radius:10px; font-size:14px;
}
.tda-project .tp-cta:hover,
.tda-post .tp-cta:hover{ filter:brightness(1.08); }

/* --- Blog listing --- */
.tda-blog{ max-width:1120px; margin:0 auto; padding:52px 22px 84px; }
.tda-blog .tb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tda-blog .tb-link{
	display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit;
	border:1px solid var(--tda-edge); border-radius:16px; overflow:hidden;
	background:linear-gradient(180deg,var(--tda-surface),#0e0d12); transition:.18s;
}
.tda-blog .tb-link:hover{ border-color:var(--tda-edge2); transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.4); }
.tda-blog .tb-thumb{ display:block; aspect-ratio:16/9; background:#0a0a0c; }
.tda-blog .tb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tda-blog .tb-meta{ font-family:var(--tda-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tda-gold); margin:18px 20px 0; }
.tda-blog .tb-title{ font-family:var(--tda-display); font-weight:400; font-size:20px; line-height:1.25; color:var(--tda-ink); margin:9px 20px 0; }
.tda-blog .tb-excerpt{ font-size:14px; line-height:1.6; color:var(--tda-muted); margin:11px 20px 22px; }
.tda-blog .tb-empty{ color:var(--tda-muted); }
@media (max-width:900px){ .tda-blog .tb-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .tda-blog .tb-grid{ grid-template-columns:1fr; } }

/* --- Single post --- */
.tda-post{ max-width:720px; margin:0 auto; padding:52px 22px 84px; color:var(--tda-body); }
.tda-post .tp-hero{ margin:0 0 30px; }
.tda-post .tp-hero img{ width:100%; aspect-ratio:16/9; max-height:420px; object-fit:cover; border-radius:16px; display:block; border:1px solid var(--tda-edge); }
.tda-post .tpost-meta{ font-family:var(--tda-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tda-gold); margin:0 0 20px; }
.tda-post .tpost-body{ font-size:18px; line-height:1.8; color:var(--tda-body); }
.tda-post .tpost-body h2{ font-family:var(--tda-display); font-weight:400; font-size:clamp(26px,3vw,32px); line-height:1.25; color:var(--tda-ink); margin:1.5em 0 .4em; }
.tda-post .tpost-body h3{ font-family:var(--tda-display); font-weight:400; font-size:23px; color:var(--tda-ink); margin:1.3em 0 .4em; }
.tda-post .tpost-body p{ margin:0 0 1.3em; }
.tda-post .tpost-body strong{ color:var(--tda-ink); }
.tda-post .tpost-body a{ color:var(--tda-teal); }
.tda-post .tpost-body img{ max-width:100%; height:auto; border-radius:12px; }
.tda-post .tpost-body ul,
.tda-post .tpost-body ol{ margin:0 0 1.3em 1.4em; }
.tda-post .tpost-body blockquote{ margin:1.5em 0; padding:8px 0 8px 22px; border-left:3px solid var(--tda-gold); color:var(--tda-ink); font-family:var(--tda-display); font-style:italic; font-size:1.08em; }

/* --- Portfolio listing --- */
.tda-portfolio{ max-width:1120px; margin:0 auto; padding:52px 22px 84px; }
.tda-portfolio .tpf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tda-portfolio .tpf-link{
	display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit;
	border:1px solid var(--tda-edge); border-radius:16px; overflow:hidden;
	background:linear-gradient(180deg,var(--tda-surface),#0e0d12); transition:.18s;
}
.tda-portfolio .tpf-link:hover{ border-color:var(--tda-edge2); transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.4); }
.tda-portfolio .tpf-thumb{ display:block; aspect-ratio:16/10; background:#0a0a0c; }
.tda-portfolio .tpf-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tda-portfolio .tpf-body{ padding:18px 20px 22px; }
.tda-portfolio .tpf-title{ display:block; font-family:var(--tda-display); font-weight:400; font-size:20px; line-height:1.25; color:var(--tda-ink); }
.tda-portfolio .tpf-cats{ display:block; margin-top:9px; font-family:var(--tda-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tda-gold); }
.tda-portfolio .tpf-empty{ color:var(--tda-muted); }
@media (max-width:900px){ .tda-portfolio .tpf-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .tda-portfolio .tpf-grid{ grid-template-columns:1fr; } }

/* --- Embedded tool --- */
.tda-embed{ max-width:1120px; margin:0 auto; padding:40px 22px 70px; }
.tda-embed-frame{ width:100%; height:1000px; border:1px solid var(--tda-edge); border-radius:12px; display:block; background:#0d0d0f; }
@media (max-width:768px){ .tda-embed-frame{ height:1600px; } }

/* --- responsive: contact stacks --- */
@media (max-width:760px){
	.tda-contact{ grid-template-columns:1fr; gap:34px; padding-top:40px; }
}