/* SE Portfolio — Terminal Theme
 * Full monospace, command-line aesthetic.
 * ============================================================ */

/* ---- Custom Properties ---- */
.sep-portfolio,
.sep-portfolio * {
	box-sizing: border-box;
}

:root {
	--sep-bg:        #0a0c10;
	--sep-surface:   #0f1318;
	--sep-surface2:  #141c24;
	--sep-border:    #1d2535;
	--sep-accent:    #00d26a;
	--sep-green:     #00d26a;
	--sep-text:      #cdd9e5;
	--sep-muted:     #5c6773;
	--sep-prompt:    #79c0ff;
	--sep-warning:   #f0b429;
	--sep-radius:    3px;
	--sep-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
	--sep-font-body: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

	/* Design variables — controllable via Style Settings */
	--sep-base-size:      15px;
	--sep-section-py:     80px;
	--sep-card-pad:       16px;
	--sep-hero-pt:        160px;
	--sep-container-max:  1100px;
	--sep-hero-name-size: clamp( 1.6rem, 4vw, 2.4rem );
	--sep-transition:     0.15s;
}

/* ---- Portfolio Root ---- */
.sep-portfolio {
	width:            100%;
	overflow-x:       hidden;
	background-color: var(--sep-bg);
	color:            var(--sep-text);
	font-family:      var(--sep-font-mono);
	font-size:        var(--sep-base-size);
	line-height:      1.7;
	margin:           0;
	padding:          0;
	word-break:       break-word;
	overflow-wrap:    break-word;
}

/* All links default */
.sep-portfolio a,
.sep-portfolio a:visited,
.sep-portfolio a:link {
	color:           var(--sep-accent);
	text-decoration: none;
}
.sep-portfolio a:hover { text-decoration: underline; }

/* Button link overrides */
.sep-portfolio .sep-btn-primary,
.sep-portfolio a.sep-btn-primary,
.sep-portfolio .sep-btn-primary:visited {
	color: #0a0c10;
	text-decoration: none;
}
.sep-portfolio .sep-btn-outline,
.sep-portfolio a.sep-btn-outline,
.sep-portfolio .sep-btn-outline:visited {
	color: var(--sep-accent);
	text-decoration: none;
}

.sep-portfolio img {
	max-width: 100%;
	height:    auto;
}

/* ============================================================
   TOP NAVIGATION — Terminal Status Bar
   ============================================================ */
.sep-topnav {
	position:        fixed;
	top:             0;
	left:            0;
	right:           0;
	z-index:         1000;
	height:          52px;
	background:      rgba( 10, 12, 16, 0.97 );
	backdrop-filter: blur( 10px );
	border-bottom:   1px solid var(--sep-border);
	display:         flex;
	align-items:     center;
	padding:         0 20px;
}

body.admin-bar .sep-topnav { top: 32px; }
@media screen and ( max-width: 782px ) {
	body.admin-bar .sep-topnav { top: 46px; }
}

.sep-topnav-inner {
	width:           100%;
	max-width:       1200px;
	margin:          0 auto;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
}

/* Path indicator (hidden mobile) */
.sep-topnav-path {
	font-size:   0.68rem;
	color:       var(--sep-muted);
	white-space: nowrap;
	flex-shrink: 0;
}
.sep-topnav-path .sep-path-tilde { color: var(--sep-accent); }

/* Logo */
.sep-topnav-logo {
	font-family:     var(--sep-font-mono);
	font-size:       0.9rem;
	color:           var(--sep-text) !important;
	text-decoration: none !important;
	white-space:     nowrap;
	flex-shrink:     0;
}
.sep-topnav-logo:hover { text-decoration: none !important; }
.sep-logo-bracket { color: var(--sep-prompt); }
.sep-logo-name    { color: var(--sep-accent); }

/* Nav links */
.sep-topnav-links {
	display:         flex;
	align-items:     center;
	gap:             0;
	list-style:      none;
	margin:          0;
	padding:         0;
	flex:            1;
	justify-content: center;
}

.sep-topnav-links a {
	font-family:     var(--sep-font-mono);
	font-size:       0.75rem;
	color:           var(--sep-muted) !important;
	text-decoration: none !important;
	padding:         6px 9px;
	border-radius:   var(--sep-radius);
	transition:      color 0.12s;
	display:         block;
	white-space:     nowrap;
}
.sep-topnav-links a:hover,
.sep-topnav-links a.is-active {
	color: var(--sep-accent) !important;
	text-decoration: none !important;
}
.sep-topnav-links a.is-active::before {
	content: '> ';
	color:   var(--sep-accent);
}

/* CTA button */
.sep-topnav-cta {
	font-family:     var(--sep-font-mono);
	font-size:       0.75rem;
	color:           #0a0c10 !important;
	text-decoration: none !important;
	background:      var(--sep-accent);
	padding:         6px 14px;
	border-radius:   var(--sep-radius);
	white-space:     nowrap;
	flex-shrink:     0;
	box-shadow:      0 0 10px rgba( 0, 210, 106, 0.3 );
	transition:      box-shadow 0.15s;
}
.sep-topnav-cta::before { content: '['; color: rgba(0,0,0,0.4); margin-right: 2px; }
.sep-topnav-cta::after  { content: ']'; color: rgba(0,0,0,0.4); margin-left:  2px; }
.sep-topnav-cta:hover {
	box-shadow:      0 0 18px rgba( 0, 210, 106, 0.55 );
	text-decoration: none !important;
}

/* Hamburger */
.sep-topnav-toggle {
	display:     none;
	background:  none;
	border:      none;
	color:       var(--sep-accent);
	cursor:      pointer;
	padding:     4px 8px;
	font-size:   1.1rem;
	line-height: 1;
	flex-shrink: 0;
}

@media ( max-width: 960px ) {
	.sep-topnav-cta  { display: none; }
	.sep-topnav-path { display: none; }
}

@media ( max-width: 768px ) {
	.sep-topnav { padding: 0 14px; }
	.sep-topnav-toggle { display: block; }
	.sep-topnav-links {
		display:         none;
		position:        fixed;
		top:             52px;
		left:            0;
		right:           0;
		background:      rgba( 10, 12, 16, 0.99 );
		border-bottom:   1px solid var(--sep-border);
		flex-direction:  column;
		align-items:     flex-start;
		padding:         10px 14px;
		gap:             2px;
		justify-content: flex-start;
	}
	.sep-topnav-links.is-open { display: flex; }
	.sep-topnav-links a {
		width:     100%;
		padding:   10px 12px;
		font-size: 0.88rem;
	}

	body.admin-bar .sep-topnav-links { top: calc( 52px + 32px ); }
	@media screen and ( max-width: 782px ) {
		body.admin-bar .sep-topnav-links { top: calc( 52px + 46px ); }
	}
}

/* ============================================================
   RIGHT-SIDE SECTION DOT NAV
   ============================================================ */
.sep-sticky-nav { display: none; }

@media ( min-width: 1280px ) {
	.sep-sticky-nav {
		display:        block;
		position:       fixed;
		right:          18px;
		top:            50%;
		transform:      translateY(-50%);
		z-index:        500;
	}
	.sep-sticky-nav ul {
		list-style:     none;
		margin:         0;
		padding:        0;
		display:        flex;
		flex-direction: column;
		gap:            8px;
	}
	.sep-nav-dot {
		width:         8px;
		height:        8px;
		border-radius: 50%;
		background:    var(--sep-border);
		display:       block;
		transition:    background 0.2s, transform 0.2s, box-shadow 0.2s;
		cursor:        pointer;
	}
	.sep-nav-dot.is-active,
	.sep-nav-dot:hover {
		background: var(--sep-accent);
		transform:  scale(1.4);
		box-shadow: 0 0 6px rgba( 0, 210, 106, 0.7 );
	}
}

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.sep-section { width: 100%; padding: 0; }
.sep-section--surface { background-color: var(--sep-surface); }

.sep-section-inner {
	max-width: var(--sep-container-max);
	margin:    0 auto;
	padding:   var(--sep-section-py) 24px;
}

.sep-section-heading {
	font-family:    var(--sep-font-mono);
	font-size:      clamp( 1.2rem, 2.5vw, 1.6rem );
	color:          var(--sep-text);
	margin:         0 0 48px;
	padding-bottom: 10px;
	border-bottom:  1px solid var(--sep-border);
	letter-spacing: 0.01em;
}
.sep-section-heading::before {
	content:     '> ';
	color:       var(--sep-accent);
	text-shadow: 0 0 8px rgba( 0, 210, 106, 0.4 );
}

/* ============================================================
   HERO — TERMINAL WINDOW
   ============================================================ */
.sep-hero {
	position:   relative;
	overflow:   hidden;
	padding:    var(--sep-hero-pt) 24px 60px;
	background: var(--sep-bg);
}

body.admin-bar .sep-hero { padding-top: 192px; }
@media screen and ( max-width: 782px ) {
	body.admin-bar .sep-hero { padding-top: 118px; }
}

/* Scanline texture overlay */
.sep-hero::after {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     repeating-linear-gradient(
		0deg,
		transparent 0px,
		transparent 3px,
		rgba( 0, 0, 0, 0.06 ) 3px,
		rgba( 0, 0, 0, 0.06 ) 4px
	);
	pointer-events: none;
	z-index:        1;
}
.sep-hero > * { position: relative; z-index: 2; }

/* Terminal window chrome bar */
.sep-term-chrome {
	display:          flex;
	align-items:      center;
	gap:              10px;
	height:           36px;
	background:       #06080c;
	border:           1px solid var(--sep-border);
	border-bottom:    none;
	border-radius:    var(--sep-radius) var(--sep-radius) 0 0;
	padding:          0 14px;
	max-width:        820px;
	margin:           0 auto;
}

.sep-term-dots {
	display: flex;
	gap:     6px;
	flex-shrink: 0;
}

.sep-term-dot {
	width:         12px;
	height:        12px;
	border-radius: 50%;
	display:       inline-block;
}
.sep-term-dot--close { background: #ff5f57; }
.sep-term-dot--min   { background: #ffbd2e; }
.sep-term-dot--max   { background: #28c840; }

.sep-term-title {
	flex:          1;
	text-align:    center;
	font-size:     0.72rem;
	color:         var(--sep-muted);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* Terminal body wrapper */
.sep-term-body {
	background:    var(--sep-surface);
	border:        1px solid var(--sep-border);
	border-top:    none;
	border-radius: 0 0 var(--sep-radius) var(--sep-radius);
	max-width:     820px;
	margin:        0 auto;
	padding:       24px 28px 28px;
}

/* Prompt lines */
.sep-term-prompt-line {
	font-size:     0.82rem;
	margin-bottom: 6px;
	display:       flex;
	flex-wrap:     wrap;
	gap:           4px;
}
.sep-term-ps1 { color: var(--sep-prompt); }
.sep-term-cmd { color: var(--sep-text); }
.sep-term-out {
	color:       var(--sep-muted);
	margin-left: 0;
	display:     block;
	margin-top:  4px;
	margin-bottom: 14px;
}

/* Hero inner layout (inside terminal body) */
.sep-hero-inner {
	position:    relative;
	display:     flex;
	align-items: center;
	gap:         40px;
	flex-wrap:   wrap;
	margin:      16px 0;
}

.sep-hero-inner.sep-no-photo {
	justify-content: flex-start;
	text-align:      left;
}

.sep-hero-photo {
	width:         140px;
	height:        140px;
	border-radius: var(--sep-radius);
	border:        1px solid var(--sep-border);
	object-fit:    cover;
	flex-shrink:   0;
}

.sep-hero-content { flex: 1; min-width: 240px; }

.sep-hero-name {
	font-family:   var(--sep-font-mono);
	font-size:     var(--sep-hero-name-size);
	color:         var(--sep-text);
	margin:        0 0 6px;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

.sep-hero-title {
	font-family:  var(--sep-font-mono);
	font-size:    clamp( 0.9rem, 2vw, 1.1rem );
	color:        var(--sep-accent);
	margin:       0 0 16px;
	display:      inline-block;
}
.sep-hero-title::after {
	content:    '█';
	display:    inline-block;
	margin-left: 1px;
	animation:  sep-blink 1s step-end infinite;
	color:      var(--sep-accent);
}

@keyframes sep-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}

.sep-hero-bio {
	color:         var(--sep-muted);
	font-size:     0.88rem;
	max-width:     560px;
	margin-bottom: 24px;
	line-height:   1.8;
}

.sep-hero-actions {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex-wrap:   wrap;
}

/* Buttons */
.sep-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	padding:       8px 18px;
	border-radius: var(--sep-radius);
	font-family:   var(--sep-font-mono);
	font-size:     0.82rem;
	cursor:        pointer;
	border:        1px solid transparent;
	transition:    box-shadow var(--sep-transition), background var(--sep-transition);
	letter-spacing: 0.01em;
}

.sep-btn-primary {
	background: var(--sep-accent);
	color:      #0a0c10;
	border-color: var(--sep-accent);
	box-shadow: 0 0 10px rgba( 0, 210, 106, 0.25 );
}
.sep-btn-primary:hover {
	box-shadow:      0 0 20px rgba( 0, 210, 106, 0.5 );
	text-decoration: none;
}

.sep-btn-outline {
	background:  transparent;
	color:       var(--sep-accent);
	border-color: var(--sep-accent);
}
.sep-btn-outline:hover {
	background:      rgba( 0, 210, 106, 0.08 );
	text-decoration: none;
}

/* Load More */
.sep-load-more-wrap {
	display:         flex;
	justify-content: center;
	margin-top:      2.5rem;
}
.sep-load-more {
	padding:        8px 28px;
	letter-spacing: 0.04em;
}
.sep-load-more::before {
	content: '> ';
	color:   var(--sep-accent);
}
.sep-load-more:hover {
	box-shadow: 0 0 12px rgba( 0, 210, 106, 0.2 );
}
.sep-load-more:disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}
.sep-load-more:disabled::before {
	content: '$ ';
}

/* Availability badge */
.sep-badge-available {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	font-family:   var(--sep-font-mono);
	font-size:     0.75rem;
	color:         var(--sep-accent);
	border:        1px solid rgba( 0, 210, 106, 0.3 );
	border-radius: 2px;
	padding:       4px 12px;
	margin-bottom: 12px;
}
.sep-badge-available::before {
	content:          '';
	width:            7px;
	height:           7px;
	border-radius:    50%;
	background-color: var(--sep-accent);
	display:          inline-block;
	box-shadow:       0 0 6px var(--sep-accent);
	animation:        sep-pulse 2s ease-in-out infinite;
}
@keyframes sep-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.4; }
}

/* Mobile hero */
@media ( max-width: 640px ) {
	.sep-hero          { padding: 72px 12px 24px; }
	.sep-term-chrome   { height: 30px; padding: 0 10px; }
	.sep-term-body     { padding: 14px 14px; }
	.sep-hero-inner    { gap: 16px; }
	.sep-hero-photo    { width: 100px; height: 100px; }
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.sep-about-inner {
	display:     grid;
	grid-template-columns: 1fr 2fr;
	gap:         48px;
	align-items: start;
}
.sep-about-inner.sep-no-photo { grid-template-columns: 1fr; }

.sep-about-photo {
	width:         100%;
	aspect-ratio:  1;
	object-fit:    cover;
	border-radius: var(--sep-radius);
	border:        1px solid var(--sep-border);
}

.sep-about-bio-block {
	border-left:   2px solid var(--sep-border);
	padding-left:  16px;
	margin-bottom: 28px;
}
.sep-about-bio-block .sep-term-prompt-line {
	margin-bottom: 8px;
	font-size:     0.75rem;
}
.sep-about-bio {
	color:         var(--sep-muted);
	margin-bottom: 0;
	line-height:   1.9;
	font-size:     0.9rem;
}

.sep-about-links {
	display:   flex;
	gap:       10px;
	flex-wrap: wrap;
}

/* Stats */
.sep-stats {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   1px;
	background:            var(--sep-border);
	border:                1px solid var(--sep-border);
	border-radius:         var(--sep-radius);
	overflow:              hidden;
	margin-bottom:         32px;
}
.sep-stat {
	background: var(--sep-surface2);
	text-align: left;
	padding:    20px 24px;
	position:   relative;
}
.sep-stat::before {
	content:    '';
	position:   absolute;
	top:        0; left: 0; right: 0;
	height:     2px;
	background: var(--sep-accent);
}
.sep-stat-number {
	font-family:   var(--sep-font-mono);
	font-size:     2rem;
	color:         var(--sep-accent);
	display:       block;
	line-height:   1;
	text-shadow:   0 0 16px rgba( 0, 210, 106, 0.35 );
	margin-bottom: 6px;
}
.sep-stat-label {
	font-family:    var(--sep-font-mono);
	font-size:      0.65rem;
	color:          var(--sep-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ============================================================
   SKILLS — Colored Chip Tags
   ============================================================ */
.sep-skills-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   40px 56px;
}

.sep-skills-group { min-width: 0; }

.sep-skills-group-label {
	font-family:    var(--sep-font-mono);
	font-size:      0.68rem;
	color:          var(--sep-accent);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom:  16px;
	display:        flex;
	align-items:    center;
	gap:            10px;
}
.sep-skills-group-label::before {
	content: '> ';
	color:   var(--sep-prompt);
}
.sep-skills-group-label::after {
	content:    '';
	flex:       1;
	height:     1px;
	background: var(--sep-border);
}

.sep-skills-tags {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

.sep-skill-tag {
	font-family:    var(--sep-font-mono);
	font-size:      0.78rem;
	padding:        4px 12px 5px;
	border-radius:  3px;
	border:         1px solid var(--sep-border);
	background:     var(--sep-surface2);
	color:          var(--sep-muted);
	white-space:    nowrap;
	line-height:    1.4;
	transition:     border-color 0.15s, color 0.15s, background 0.15s;
}

.sep-skill-tag--high {
	border-color: rgba( 63, 185, 80, 0.45 );
	color:        var(--sep-accent);
	background:   rgba( 63, 185, 80, 0.06 );
}

.sep-skill-tag--mid {
	border-color: rgba( 88, 166, 255, 0.45 );
	color:        var(--sep-prompt);
	background:   rgba( 88, 166, 255, 0.06 );
}

/* ============================================================
   CARDS
   ============================================================ */
.sep-cards-grid {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap:                   16px;
}

.sep-card {
	background:    var(--sep-surface);
	border:        1px solid var(--sep-border);
	border-radius: var(--sep-radius);
	overflow:      hidden;
	transition:    border-color var(--sep-transition), box-shadow var(--sep-transition);
	display:       flex;
	flex-direction: column;
}
.sep-card:hover {
	border-color: var(--sep-accent);
	box-shadow:   0 0 16px rgba( 0, 210, 106, 0.12 );
}

/* Terminal chrome bar on each card */
.sep-card-chrome {
	display:       flex;
	align-items:   center;
	gap:           6px;
	height:        28px;
	background:    #06080c;
	border-bottom: 1px solid var(--sep-border);
	padding:       0 10px;
	flex-shrink:   0;
}
.sep-card-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--sep-border);
	flex-shrink:   0;
}
.sep-card-dot:nth-child(1) { background: #ff5f57; }
.sep-card-dot:nth-child(2) { background: #ffbd2e; }
.sep-card-dot:nth-child(3) { background: #28c840; }
.sep-card-filename {
	font-family:   var(--sep-font-mono);
	font-size:     0.65rem;
	color:         var(--sep-muted);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	flex:          1;
}

.sep-card-body { padding: var(--sep-card-pad); flex: 1; display: flex; flex-direction: column; }

.sep-card-header {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             8px;
	margin-bottom:   8px;
}
.sep-card-header .sep-card-title { margin: 0; flex: 1; min-width: 0; }

.sep-card-thumbnail {
	width:         100%;
	aspect-ratio:  16 / 9;
	object-fit:    cover;
	background:    var(--sep-bg);
	display:       block;
}

.sep-card-title {
	font-family: var(--sep-font-mono);
	font-size:   0.95rem;
	color:       var(--sep-text);
	margin:      0 0 8px;
}

.sep-card-meta {
	font-size: 0.75rem;
	color:     var(--sep-muted);
	margin:    0 0 10px;
}

.sep-card-desc {
	font-size:     0.85rem;
	color:         var(--sep-muted);
	margin-bottom: 14px;
	line-height:   1.7;
}

.sep-card-actions {
	display:    flex;
	gap:        8px;
	margin-top: auto;
	padding-top: 12px;
}

.sep-card-link {
	font-family:   var(--sep-font-mono);
	font-size:     0.75rem;
	color:         var(--sep-accent);
	border:        1px solid var(--sep-border);
	border-radius: var(--sep-radius);
	padding:       4px 10px;
	transition:    border-color var(--sep-transition);
}
.sep-card-link:hover {
	border-color:    var(--sep-accent);
	text-decoration: none;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.sep-status {
	display:       inline-block;
	font-family:   var(--sep-font-mono);
	font-size:     0.68rem;
	padding:       2px 8px;
	border-radius: var(--sep-radius);
	border:        1px solid transparent;
	white-space:   nowrap;
	align-self:    flex-start;
	flex-shrink:   0;
}
.sep-status-completed  { color: var(--sep-accent);  border-color: rgba(0,210,106,0.4); background: rgba(0,210,106,0.08); }
.sep-status-in-progress { color: var(--sep-warning); border-color: rgba(240,180,41,0.4); background: rgba(240,180,41,0.08); }
.sep-status-archived   { color: var(--sep-muted);   border-color: var(--sep-border); }

/* ============================================================
   TAGS
   ============================================================ */
.sep-tags {
	display:    flex;
	flex-wrap:  wrap;
	gap:        6px;
	margin-top: 10px;
}
.sep-tag {
	font-family:   var(--sep-font-mono);
	font-size:     0.68rem;
	color:         var(--sep-prompt);
	background:    rgba( 121, 192, 255, 0.07 );
	border:        1px solid rgba( 121, 192, 255, 0.2 );
	border-radius: var(--sep-radius);
	padding:       2px 8px;
}

/* ============================================================
   FILTER TABS (Projects)
   ============================================================ */
.sep-filter-tabs {
	display:       flex;
	gap:           6px;
	flex-wrap:     wrap;
	margin-bottom: 24px;
}
.sep-filter-tab {
	font-family:   var(--sep-font-mono);
	font-size:     0.78rem;
	color:         var(--sep-muted);
	background:    transparent;
	border:        1px solid var(--sep-border);
	border-radius: var(--sep-radius);
	padding:       5px 12px;
	cursor:        pointer;
	transition:    border-color 0.15s, color 0.15s;
}
.sep-filter-tab:hover,
.sep-filter-tab.is-active {
	color:        var(--sep-accent);
	border-color: var(--sep-accent);
}
.sep-filter-tab.is-active::before {
	content: '> ';
	color:   var(--sep-accent);
}

/* ============================================================
   TIMELINE — Git Log Style
   ============================================================ */
.sep-timeline {
	position:     relative;
	padding-left: 28px;
}
.sep-timeline::before {
	content:          '';
	position:         absolute;
	left:             7px;
	top:              0;
	bottom:           0;
	width:            1px;
	background-color: var(--sep-border);
}
.sep-timeline-item {
	position:      relative;
	margin-bottom: 40px;
}
.sep-timeline-item::before {
	content:          '';
	position:         absolute;
	left:             -24px;
	top:              6px;
	width:            10px;
	height:           10px;
	border-radius:    50%;
	background-color: var(--sep-accent);
	border:           2px solid var(--sep-bg);
	box-shadow:       0 0 6px rgba( 0, 210, 106, 0.6 );
}
.sep-timeline-title {
	font-family: var(--sep-font-mono);
	font-size:   0.95rem;
	color:       var(--sep-accent);
	margin:      0 0 4px;
}
.sep-timeline-title::before {
	content: '// ';
	color:   var(--sep-muted);
	font-size: 0.8em;
}
.sep-timeline-subtitle {
	font-family: var(--sep-font-mono);
	font-size:   0.85rem;
	color:       var(--sep-prompt);
	margin:      0;
}
.sep-timeline-subtitle a {
	color: var(--sep-prompt) !important;
}
.sep-timeline-date {
	font-family: var(--sep-font-mono);
	font-size:   0.75rem;
	color:       var(--sep-muted);
	margin:      4px 0 10px;
}
.sep-timeline-body {
	color:     var(--sep-muted);
	font-size: 0.85rem;
	line-height: 1.8;
}

/* ============================================================
   CERTIFICATES — special image card
   ============================================================ */
.sep-cert-image {
	width:         100%;
	aspect-ratio:  4 / 3;
	object-fit:    contain;
	background:    var(--sep-bg);
	display:       block;
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.sep-contact-intro {
	color:      var(--sep-muted);
	font-size:  0.88rem;
	max-width:  580px;
	margin:     0 auto 40px;
	line-height: 1.9;
}

.sep-contact-inner { }

.sep-contact-cmd { margin-bottom: 16px; }

.sep-contact-cards {
	display:               grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap:                   12px;
	max-width:             800px;
	margin:                0 auto 32px;
}

.sep-contact-card {
	display:         flex;
	flex-direction:  column;
	gap:             4px;
	padding:         20px 18px;
	background:      var(--sep-surface);
	border:          1px solid var(--sep-border);
	border-radius:   var(--sep-radius);
	color:           var(--sep-text) !important;
	text-decoration: none !important;
	transition:      border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sep-contact-card:hover {
	border-color:    var(--sep-accent);
	box-shadow:      0 0 14px rgba( 0, 210, 106, 0.15 );
	transform:       translateY(-2px);
	text-decoration: none !important;
}
.sep-contact-card--primary {
	grid-column:    1 / -1;
	flex-direction: row;
	align-items:    center;
	gap:            20px;
	padding:        22px 28px;
}
.sep-contact-card--primary .sep-contact-card-icon  { margin-bottom: 0; flex-shrink: 0; }
.sep-contact-card--primary .sep-contact-card-label { margin-bottom: 2px; }
.sep-contact-card--primary .sep-contact-card-value { font-size: 1rem; flex: 1; }
.sep-contact-card--primary::after {
	content:     '→';
	font-family: var(--sep-font-mono);
	font-size:   1.3rem;
	color:       var(--sep-accent);
	flex-shrink: 0;
	transition:  transform 0.15s;
}
.sep-contact-card--primary:hover::after { transform: translateX(4px); }
.sep-contact-card--plain:hover { transform: none; }

.sep-contact-card-icon {
	color:           var(--sep-prompt);
	background:      rgba( 121, 192, 255, 0.08 );
	border:          1px solid rgba( 121, 192, 255, 0.2 );
	border-radius:   var(--sep-radius);
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	margin-bottom:   8px;
	flex-shrink:     0;
}
.sep-contact-card-label {
	font-family:    var(--sep-font-mono);
	font-size:      0.65rem;
	color:          var(--sep-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.sep-contact-card-value {
	font-family:   var(--sep-font-mono);
	font-size:     0.85rem;
	color:         var(--sep-text);
	word-break:    break-word;
	overflow-wrap: anywhere;
}
.sep-contact-availability {
	margin-top: 28px;
	display:    flex;
	justify-content: center;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.sep-empty {
	text-align:    center;
	color:         var(--sep-muted);
	font-family:   var(--sep-font-mono);
	font-size:     0.85rem;
	padding:       48px 0;
	border:        1px dashed var(--sep-border);
	border-radius: var(--sep-radius);
}
.sep-empty::before {
	content: '$ ls --result\A';
	display: block;
	color:   var(--sep-prompt);
	white-space: pre;
	margin-bottom: 8px;
}

/* ============================================================
   PORTFOLIO FOOTER — Terminal Style
   ============================================================ */
.sep-footer {
	background:  var(--sep-bg);
	border-top:  1px solid var(--sep-border);
	padding:     48px 24px 28px;
}
.sep-footer-inner { max-width: 1100px; margin: 0 auto; }

.sep-footer-top {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	gap:             40px;
	flex-wrap:       wrap;
	margin-bottom:   36px;
	padding-bottom:  36px;
	border-bottom:   1px solid var(--sep-border);
}
.sep-footer-brand-comment {
	font-family: var(--sep-font-mono);
	font-size:   0.65rem;
	color:       var(--sep-muted);
	margin:      0 0 10px;
	opacity:     0.6;
}
.sep-footer-brand-name {
	font-family: var(--sep-font-mono);
	font-size:   1rem;
	color:       var(--sep-accent);
	margin:      0 0 4px;
}
.sep-footer-brand-name::before {
	content: '<';
	color:   var(--sep-prompt);
}
.sep-footer-brand-name::after {
	content: ' />';
	color:   var(--sep-prompt);
}
.sep-footer-brand-tagline {
	font-family: var(--sep-font-mono);
	font-size:   0.72rem;
	color:       var(--sep-muted);
	margin:      0;
}

.sep-footer-nav     { display: flex; gap: 48px; flex-wrap: wrap; }
.sep-footer-nav-col h4 {
	font-family:    var(--sep-font-mono);
	font-size:      0.65rem;
	color:          var(--sep-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin:         0 0 12px;
}
.sep-footer-nav-col ul {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            8px;
}
.sep-footer-nav-col a {
	font-family:     var(--sep-font-mono);
	font-size:       0.8rem;
	color:           var(--sep-muted) !important;
	text-decoration: none !important;
	transition:      color 0.15s;
}
.sep-footer-nav-col a:hover { color: var(--sep-accent) !important; }
.sep-footer-nav-col a::before {
	content: '  ';
	color:   var(--sep-border);
}
.sep-footer-nav-col a:hover::before { color: var(--sep-accent); content: '> '; }

.sep-footer-bottom {
	display:         flex;
	justify-content: center;
	align-items:     center;
	gap:             16px;
	flex-wrap:       wrap;
}
.sep-footer-copy {
	font-family: var(--sep-font-mono);
	font-size:   0.7rem;
	color:       var(--sep-muted);
	margin:      0;
}
.sep-footer-copy::before {
	content: '$ echo ';
	color:   var(--sep-prompt);
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media ( max-width: 768px ) {
	.sep-about-inner  { grid-template-columns: 1fr; }
	.sep-about-photo  { max-width: 160px; }
	.sep-skills-grid  { grid-template-columns: 1fr; gap: 32px; }
	.sep-footer-top   { flex-direction: column; }
	.sep-footer-bottom { flex-direction: column; text-align: center; }
	.sep-footer-brand { text-align: center; }
}

@media ( max-width: 480px ) {
	.sep-section-inner { padding: 48px 16px; }
	.sep-stats         { grid-template-columns: 1fr; }
	.sep-stat          { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
	.sep-stat-number   { font-size: 1.5rem; margin-bottom: 0; }
	.sep-cards-grid    { grid-template-columns: 1fr; }
	.sep-contact-cards { grid-template-columns: 1fr; }
	.sep-contact-card--primary { flex-direction: column; align-items: flex-start; }
	.sep-contact-card--primary::after { display: none; }
	.sep-hero-actions            { flex-direction: column; align-items: stretch; }
	.sep-hero-actions .sep-btn   { justify-content: center; }
}